---
title: Button
description: Triggers actions or events, such as opening dialogs or navigating to other pages. Use Button to let merchants perform specific tasks or initiate interactions throughout the interface.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsactions/button
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsactions/button.md
---

# Button

Triggers actions or events, such as opening dialogs or navigating to other pages. Use Button to let merchants perform specific tasks or initiate interactions throughout the interface.

## Properties

* command

  '--auto' | '--show' | '--hide' | '--toggle'

  Default: '--auto'

  Sets the action the `commandFor` should take when this clickable is activated.

  See the documentation of particular components for the actions they support.

  * `--auto`: a default action for the target component.
  * `--show`: shows the target component.
  * `--hide`: hides the target component.
  * `--toggle`: toggles the target component.

* commandFor

  string

  ID of a component that should respond to activations (e.g. clicks) on this component.

  See `command` for how to control the behavior of the target.

* disabled

  boolean

  Default: false

  Disables the Button meaning it cannot be clicked or receive focus.

* id

  string

  A unique identifier for the element.

* loading

  boolean

  Default: false

  Replaces content with a loading indicator while a background action is being performed.

  This also disables the Button.

* tone

  'auto' | 'neutral' | 'caution' | 'warning' | 'critical'

  Default: 'auto'

  Sets the tone of the Button, based on the intention of the information being conveyed.

* variant

  'primary' | 'secondary'

  Default: 'auto' - the variant is automatically determined by the Button's context

  Changes the visual appearance of the Button.

## Events

* click

  (event: CallbackEvent<"s-button">) => void

  Called when the button is activated.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-button variant="primary">Add customer</s-button>
  <s-button variant="secondary">Select more items</s-button>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/button-default.png)