# Button

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

```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

### ButtonBaseProps

### accessibilityRole

value: `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'
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

value: `boolean`

Disables the button, disallowing any interaction.

### id

value: `string`

A unique identifier for the button.

### lang

value: `string`

Alias for `language`

### language

value: `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)

### onBlur

value: `() => void`

Callback when focus is removed.

### onClick

value: `() => 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`.

### onFocus

value: `() => void`

Callback when input is focused.

### onPress

value: `() => 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`.

### tone

value: `'default' | 'critical'`

Sets the color treatment of the Button.

### variant

value: `'primary' | 'secondary' | 'tertiary'`

Changes the visual appearance of the Button.

### ButtonAnchorProps

### disabled

value: `boolean`

Disables the button, disallowing any interaction.

### download

value: `boolean | string`

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

### href

value: `string`

The URL to link to. If set, it will navigate to the location specified by `href` after executing the `onClick` callback.

### id

value: `string`

A unique identifier for the button.

### lang

value: `string`

Alias for `language`

### language

value: `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)

### onBlur

value: `() => void`

Callback when focus is removed.

### onClick

value: `() => 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`.

### onFocus

value: `() => void`

Callback when input is focused.

### onPress

value: `() => 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`.

### target

value: `'_blank' | '_self'`

Specifies where to display the linked URL

### to

value: `string`

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

### tone

value: `'default' | 'critical'`

Sets the color treatment of the Button.

### variant

value: `'primary' | 'secondary' | 'tertiary'`

Changes the visual appearance of the Button.

## Related

- [Pressable](https://shopify.dev/docs/api/admin-extensions/components/actions/pressable)
- [Link](https://shopify.dev/docs/api/admin-extensions/components/actions/link)