# Button Use this component when you want to provide users the ability to perform specific actions, like saving data. ### Add a simple button to your app. ```tsx import {render, Button} from '@shopify/ui-extensions-react/admin'; render('Playground', () => <App />); function App() { return ( <Button onPress={() => { console.log('onPress event'); }} > Click here </Button> ); } ``` ```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); }); ``` ## ButtonProps ### ButtonProps ButtonBaseProps | ButtonAnchorProps ### ButtonBaseProps ### accessibilityLabel A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers. Use this when using only an icon or the button text is not enough context for users using assistive technologies. ### 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. ### disabled Disables the button, disallowing any interaction. ### id A unique identifier for the button. ### lang Alias for `language` ### 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) ### onBlur Callback when focus is removed. ### 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`. ### onFocus Callback when input is focused. ### 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`. ### tone Sets the color treatment of the Button. ### variant Changes the visual appearance of the Button. ### AccessibilityRole 'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' ### ButtonAnchorProps ### accessibilityLabel A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers. Use this when using only an icon or the button text is not enough context for users using assistive technologies. ### disabled Disables the button, disallowing any interaction. ### download Tells browsers to download the linked resource instead of navigating to it. Optionally accepts filename value to rename file. ### href The URL to link to. If set, it will navigate to the location specified by `href` after executing the `onClick` callback. ### id A unique identifier for the button. ### lang Alias for `language` ### 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) ### onBlur Callback when focus is removed. ### 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`. ### onFocus Callback when input is focused. ### 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`. ### target Specifies where to display the linked URL ### to Alias for `href` If set, it will navigate to the location specified by `to` after executing the `onClick` callback. ### tone Sets the color treatment of the Button. ### variant Changes the visual appearance of the Button. ## Related - [Pressable](/docs/api/admin-extensions/components/actions/pressable) - [Link](/docs/api/admin-extensions/components/actions/link)