--- title: Button description: >- Use this component when you want to provide users the ability to perform specific actions, like saving data. api_version: 2024-04 api_name: admin-extensions source_url: html: >- https://shopify.dev/docs/api/admin-extensions/2024-04/components/actions/button md: >- https://shopify.dev/docs/api/admin-extensions/2024-04/components/actions/button.md --- # Button Use this component when you want to provide users the ability to perform specific actions, like saving data. ## ButtonProps `ButtonBaseProps | ButtonAnchorProps` ### ButtonAnchorProps * href string required The URL to link to. If set, it will navigate to the location specified by `href` after executing the `onClick` callback. * to string Alias for `href` If set, it will navigate to the location specified by `to` after executing the `onClick` callback. * download string | boolean Tells browsers to download the linked resource instead of navigating to it. Optionally accepts filename value to rename file. * target "\_blank" | "\_self" Default: '\_self' Specifies where to display the linked URL * onClick () => void Callback when a link is pressed. If `href` is set, it will execute the callback and then navigate to the location specified by `href`. * onPress () => void Alias for `onClick` Callback when a link is pressed. If `href` is set, it will execute the callback and then navigate to the location specified by `href`. * id string A unique identifier for the button. * disabled boolean Disables the button, disallowing any interaction. * variant "primary" | "secondary" | "tertiary" Changes the visual appearance of the Button. * tone "critical" | "default" Sets the color treatment of the Button. * language string Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label) * lang string Alias for `language` * onBlur () => void Callback when focus is removed. * onFocus () => void Callback when input is focused. ### ButtonBaseProps * accessibilityRole Extract\ Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page. * id string A unique identifier for the button. * disabled boolean Disables the button, disallowing any interaction. * variant "primary" | "secondary" | "tertiary" Changes the visual appearance of the Button. * tone "critical" | "default" Sets the color treatment of the Button. * language string Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label) * lang string Alias for `language` * onClick () => void Callback when a link is pressed. If `href` is set, it will execute the callback and then navigate to the location specified by `href`. * onPress () => void Alias for `onClick` Callback when a button is pressed. If `href` is set, it will execute the callback and then navigate to the location specified by `href`. * onBlur () => void Callback when focus is removed. * onFocus () => void Callback when input is focused. ### ButtonBaseProps * accessibilityRole Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page. ```ts Extract ``` * id A unique identifier for the button. ```ts string ``` * disabled Disables the button, disallowing any interaction. ```ts boolean ``` * variant Changes the visual appearance of the Button. ```ts "primary" | "secondary" | "tertiary" ``` * tone Sets the color treatment of the Button. ```ts "critical" | "default" ``` * language Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. \[Reference of values]\(https://www\.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label) ```ts string ``` * lang Alias for \`language\` ```ts string ``` * onClick Callback when a link is pressed. If \`href\` is set, it will execute the callback and then navigate to the location specified by \`href\`. ```ts () => void ``` * onPress Alias for \`onClick\` Callback when a button is pressed. If \`href\` is set, it will execute the callback and then navigate to the location specified by \`href\`. ```ts () => void ``` * onBlur Callback when focus is removed. ```ts () => void ``` * onFocus Callback when input is focused. ```ts () => void ``` ```ts interface ButtonBaseProps extends CommonProps { /** * Sets the semantic meaning of the component’s content. When set, * the role will be used by assistive technologies to help users * navigate the page. */ accessibilityRole?: Extract; } ``` ### AccessibilityRole ```ts 'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' ``` ### ButtonAnchorProps * href The URL to link to. If set, it will navigate to the location specified by \`href\` after executing the \`onClick\` callback. ```ts string ``` * to Alias for \`href\` If set, it will navigate to the location specified by \`to\` after executing the \`onClick\` callback. ```ts string ``` * download Tells browsers to download the linked resource instead of navigating to it. Optionally accepts filename value to rename file. ```ts string | boolean ``` * target Specifies where to display the linked URL ```ts "_blank" | "_self" ``` * onClick Callback when a link is pressed. If \`href\` is set, it will execute the callback and then navigate to the location specified by \`href\`. ```ts () => void ``` * onPress Alias for \`onClick\` Callback when a link is pressed. If \`href\` is set, it will execute the callback and then navigate to the location specified by \`href\`. ```ts () => void ``` * id A unique identifier for the button. ```ts string ``` * disabled Disables the button, disallowing any interaction. ```ts boolean ``` * variant Changes the visual appearance of the Button. ```ts "primary" | "secondary" | "tertiary" ``` * tone Sets the color treatment of the Button. ```ts "critical" | "default" ``` * language Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. \[Reference of values]\(https://www\.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label) ```ts string ``` * lang Alias for \`language\` ```ts string ``` * onBlur Callback when focus is removed. ```ts () => void ``` * onFocus Callback when input is focused. ```ts () => void ``` ```ts interface ButtonAnchorProps extends CommonProps { /** * The URL to link to. * If set, it will navigate to the location specified by `href` after executing the `onClick` callback. */ href: AnchorProps['href']; /** * Alias for `href` * If set, it will navigate to the location specified by `to` after executing the `onClick` callback. */ to?: AnchorProps['href']; /** * Tells browsers to download the linked resource instead of navigating to it. * Optionally accepts filename value to rename file. */ download?: boolean | string; /** * Specifies where to display the linked URL * @default '_self' */ target?: '_blank' | '_self'; /** * Callback when a link is pressed. If `href` is set, * it will execute the callback and then navigate to the location specified by `href`. */ onClick?: AnchorProps['onClick']; /** * Alias for `onClick` * Callback when a link is pressed. If `href` is set, * it will execute the callback and then navigate to the location specified by `href`. */ onPress?: AnchorProps['onClick']; } ``` Examples ## Preview ![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2024-04/button-default.png) ### Examples * #### Add a simple button to your app. ##### React ```tsx import {render, Button} from '@shopify/ui-extensions-react/admin'; render('Playground', () => ); function App() { return ( ); } ``` ##### JS ```js import {extend, Button} from '@shopify/ui-extensions/admin'; extend('Playground', (root) => { const button = root.createComponent( Button, {onPress: () => console.log('onPress event')}, 'Click here', ); root.appendChild(button); }); ``` ## Related [- Pressable](https://shopify.dev/docs/api/admin-extensions/components/actions/pressable) [- Link](https://shopify.dev/docs/api/admin-extensions/components/actions/link)