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

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

value: `string`

A unique identifier for the button.

### disabled

value: `boolean`

Disables the button, disallowing any interaction.

### variant

value: `"primary" | "secondary" | "tertiary"`

Changes the visual appearance of the Button.

### tone

value: `"critical" | "default"`

Sets the color treatment of the Button.

### 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)

### lang

value: `string`

Alias for `language`

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

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

### onBlur

value: `() => void`

Callback when focus is removed.

### onFocus

value: `() => void`

Callback when input is focused.

### ButtonAnchorProps

### href

value: `string`

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

### to

value: `string`

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

### download

value: `string | boolean`

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

### target

value: `"_blank" | "_self"`

Specifies where to display the linked URL

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

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

### id

value: `string`

A unique identifier for the button.

### disabled

value: `boolean`

Disables the button, disallowing any interaction.

### variant

value: `"primary" | "secondary" | "tertiary"`

Changes the visual appearance of the Button.

### tone

value: `"critical" | "default"`

Sets the color treatment of the Button.

### 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)

### lang

value: `string`

Alias for `language`

### onBlur

value: `() => void`

Callback when focus is removed.

### onFocus

value: `() => void`

Callback when input is focused.

## Related

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