Choose a version:

Button

Use this component when you want to provide users the ability to perform specific actions, like saving data.

Anchor to buttonpropsButtonProps

ButtonBaseProps | ButtonAnchorProps

Anchor to ButtonAnchorProps

ButtonAnchorProps

Anchor to href href string required: The URL to link to. If set, it will navigate to the location specified by href after executing the onClick callback.
Anchor to to to string: Alias for href If set, it will navigate to the location specified by to after executing the onClick callback.
Anchor to download download string | boolean: Tells browsers to download the linked resource instead of navigating to it. Optionally accepts filename value to rename file.
Anchor to target target "_blank" | "_self" Default: '_self': Specifies where to display the linked URL
Anchor to onClick 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.
Anchor to onPress 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.
Anchor to id id string: A unique identifier for the button.
Anchor to disabled disabled boolean: Disables the button, disallowing any interaction.
Anchor to variant variant "primary" | "secondary" | "tertiary": Changes the visual appearance of the Button.
Anchor to tone tone "critical" | "default": Sets the color treatment of the Button.
Anchor to language 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 ("subtag" label)
Anchor to lang lang string: Alias for language
Anchor to onBlur onBlur () => void: Callback when focus is removed.
Anchor to onFocus onFocus () => void: Callback when input is focused.

Anchor to ButtonBaseProps

ButtonBaseProps

Anchor to accessibilityRole accessibilityRole Extract<, 'submit' | 'button' | 'reset'>: 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.
Anchor to id id string: A unique identifier for the button.
Anchor to disabled disabled boolean: Disables the button, disallowing any interaction.
Anchor to variant variant "primary" | "secondary" | "tertiary": Changes the visual appearance of the Button.
Anchor to tone tone "critical" | "default": Sets the color treatment of the Button.
Anchor to language 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 ("subtag" label)
Anchor to lang lang string: Alias for language
Anchor to onClick 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.
Anchor to onPress 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.
Anchor to onBlur onBlur () => void: Callback when focus is removed.
Anchor to onFocus onFocus () => void: Callback when input is focused.

ButtonProps

ButtonBaseProps | ButtonAnchorProps

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.
```
Extract<AccessibilityRole, 'submit' | 'button' | 'reset'>
```
id
A unique identifier for the button.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
variant
Changes the visual appearance of the Button.
```
"primary" | "secondary" | "tertiary"
```
tone
Sets the color treatment of the Button.
```
"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)
```
string
```
lang
Alias for `language`
```
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`.
```
() => 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`.
```
() => void
```
onBlur
Callback when focus is removed.
```
() => void
```
onFocus
Callback when input is focused.
```
() => void
```

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, 'submit' | 'button' | 'reset'>;
}

AccessibilityRole

'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.
```
string
```
to
Alias for `href` If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
```
string
```
download
Tells browsers to download the linked resource instead of navigating to it. Optionally accepts filename value to rename file.
```
string | boolean
```
target
Specifies where to display the linked URL
```
"_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`.
```
() => 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`.
```
() => void
```
id
A unique identifier for the button.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
variant
Changes the visual appearance of the Button.
```
"primary" | "secondary" | "tertiary"
```
tone
Sets the color treatment of the Button.
```
"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)
```
string
```
lang
Alias for `language`
```
string
```
onBlur
Callback when focus is removed.
```
() => void
```
onFocus
Callback when input is focused.
```
() => void
```

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'];
}

Was this section helpful?

Add a simple button to your app.

import {render, Button} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {

return (

<Button

onPress={() => {

console.log('onPress event');

}}

Click here

</Button>

);

}

examples

Add a simple button to your app.

React

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);
});

Preview

Anchor to relatedRelated

Pressable

Link