Button

@shopify/shop-minis-platform-sdk / components/Button

ButtonProps

Properties

bounceOnPress?

optional bounceOnPress: boolean

disabled?

optional disabled: boolean

iconMargin?

optional iconMargin: "s" | "section" | "auto" | "m" | "l" | "-xxxl" | "-xxl" | "-xl" | "-l" | "-m" | "-gutter" | "-section" | "-s" | "-xs-s" | "-xs" | "-xxs" | "-xxxs" | "none" | "xxxs" | "xxs" | "xs" | "xs-s" | "gutter" | "xl" | "xxl" | "xxxl"

iconSize?

optional iconSize: "s" | "m" | "l" | "xxs" | "xs" | "xl" | "xxl"

isListItem?

optional isListItem: boolean

justificationStyle?

optional justificationStyle: "centered" | "edge-to-edge"

leftIcon?

optional leftIcon: "share" | "reverse" | "sort" | "filter" | "phone" | "search" | "link" | "sub" | "note" | "account" | "add" | "anonymous-user" | "ar-error-badge" | "ar-expand" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "back" | "bell" | "bin" | "bold-chevron-right" | "calendar" | "camera-flash" | "camera" | "chat" | "check-circle" | "check-filled" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock" | "close-filled" | "close-outlined" | "close" | "cloud" | "copy" | "credit-card" | "currency" | "cvv" | "delete" | "face" | "favorites-heart" | "forward" | "gift" | "globe" | "hamburger-menu" | "heart" | "help-filled" | "help" | "information-filled" | "information" | "launch" | "licenses" | "location-arrow" | "lock" | "mail" | "minus" | "more" | "network" | "no-image" | "notifications" | "pause" | "pencil" | "photo" | "play" | "privacy-shield" | "profile-circle-solid" | "profile-circle" | "refresh" | "right-chevron" | "settings" | "share-ios" | "sign-in-key" | "silent" | "sparkle-single" | "star-filled" | "star" | "storefront" | "tag-filled" | "tag" | "terms" | "thumbs-down" | "thumbs-up" | "up-down" | "video-camera" | "volume-full" | "volume-off" | "warn-filled" | "warn" | "website" | "wishlist"

onPress()

onPress: () => void

Returns

void

opacityOnPress?

optional opacityOnPress: boolean

paddingHorizontal?

optional paddingHorizontal: "s" | "section" | "auto" | "m" | "l" | "-xxxl" | "-xxl" | "-xl" | "-l" | "-m" | "-gutter" | "-section" | "-s" | "-xs-s" | "-xs" | "-xxs" | "-xxxs" | "none" | "xxxs" | "xxs" | "xs" | "xs-s" | "gutter" | "xl" | "xxl" | "xxxl"

rightIcon?

optional rightIcon: "share" | "reverse" | "sort" | "filter" | "phone" | "search" | "link" | "sub" | "note" | "account" | "add" | "anonymous-user" | "ar-error-badge" | "ar-expand" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "back" | "bell" | "bin" | "bold-chevron-right" | "calendar" | "camera-flash" | "camera" | "chat" | "check-circle" | "check-filled" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock" | "close-filled" | "close-outlined" | "close" | "cloud" | "copy" | "credit-card" | "currency" | "cvv" | "delete" | "face" | "favorites-heart" | "forward" | "gift" | "globe" | "hamburger-menu" | "heart" | "help-filled" | "help" | "information-filled" | "information" | "launch" | "licenses" | "location-arrow" | "lock" | "mail" | "minus" | "more" | "network" | "no-image" | "notifications" | "pause" | "pencil" | "photo" | "play" | "privacy-shield" | "profile-circle-solid" | "profile-circle" | "refresh" | "right-chevron" | "settings" | "share-ios" | "sign-in-key" | "silent" | "sparkle-single" | "star-filled" | "star" | "storefront" | "tag-filled" | "tag" | "terms" | "thumbs-down" | "thumbs-up" | "up-down" | "video-camera" | "volume-full" | "volume-off" | "warn-filled" | "warn" | "website" | "wishlist"

size?

optional size: "s" | "m" | "l"

style?

optional style: ViewStyle & TextStyle

text?

optional text: string

textAlign?

optional textAlign: "center" | "right" | "left"

variant?

optional variant: "text" | "buttonSmall" | "overlay" | "primary-unbranded" | "primary-subdued" | "primary" | "secondary" | "tertiary" | "blurred" | "borderless" | "borderlessUnbranded" | "outlined" | "dangerous" | "outlined-dangerous" | "cashPrimary" | "cashSecondary" | "cashTertiary" | "cashBlack" | "cashOutlined"

---

Button()

Button(__namedParameters): Element

Parameters

Parameter	Type
__namedParameters	ButtonProps

Returns

Element