# Button

Buttons enable the merchant to initiate actions, like "add", "save", or "next".
  > Note:
  > The `plain` `ButtonType` is no longer supported as of POS 10.0.0 and defaults to `basic`.

```tsx
import React from 'react'
import { Button, Navigator, Screen, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'

const ModalComponent = () => {
  const api = useApi()
  return (
    <Navigator>
      <Screen title="Home" name="Home">
        <Button title="Press me!" onPress={() => api.toast.show('Button tapped!')} />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => {
  return <ModalComponent />
})
```

```ts
import {
  Button,
  Navigator,
  Screen,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root, api) => {
    const button = root.createComponent(Button, {
      title: 'Press me!',
      onPress: () => {
        api.toast.show('Button tapped!');
      },
    });

    const screen = root.createComponent(Screen, {
      name: 'Home',
      title: 'Home',
    });
    screen.append(button);

    const navigator =
      root.createComponent(Navigator);

    navigator.append(screen);

    root.append(navigator);
  },
);

```

## Button

### ButtonProps

### isDisabled

value: `boolean`

Sets whether the `Button` can be tapped.

### isLoading

value: `boolean`

Sets whether the `Button` is displaying an animated loading state.

### onPress

value: `() => void`

The callback that is executed when the user taps the button.

### title

value: `string`

The text set on the `Button`.

Note: When using a Button for menu-item targets, the title will be ignored. The text on the menu-item will be the extension's description.

### type

value: `ButtonType`

  - ButtonType: 'primary' | 'basic' | 'destructive' | 'plain'
The type of `Button` to render. Determines the appearance of the button. Note: The 'plain' type is no longer supported as of POS 10.0.0. Using it will default to 'basic'.

## ButtonType

Determines the appearance of the button.