Button

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

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

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

function App() {
  return (
    <Button
      onPress={() => {
        console.log('onPress event');
      }}
    >
      Click here
    </Button>
  );
}

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

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.

id

A unique identifier for the button.

disabled

Disables the button, disallowing any interaction.

variant

Changes the visual appearance of the Button.

tone

Sets the color treatment of the Button.

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)

lang

Alias for `language`

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

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

Callback when focus is removed.

onFocus

Callback when input is focused.

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.

to

Alias for `href` If set, it will navigate to the location specified by `to` after executing the `onClick` callback.

download

Tells browsers to download the linked resource instead of navigating to it. Optionally accepts filename value to rename file.

target

Specifies where to display the linked URL

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

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

A unique identifier for the button.

disabled

Disables the button, disallowing any interaction.

variant

Changes the visual appearance of the Button.

tone

Sets the color treatment of the Button.

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)

lang

Alias for `language`

onBlur

Callback when focus is removed.

onFocus

Callback when input is focused.

Related

• Pressable
• Link