---
title: Button
description: >-
  The `Button` component triggers actions or events, such as opening dialogs or
  navigating to other pages. Use `Button` to let merchants perform specific
  tasks or to initiate interactions throughout the POS interface.


  Buttons support various visual styles, tones, and interaction patterns to
  communicate intent and hierarchy within 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-components/actions/button
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/button.md
---

# Button

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

Buttons support various visual styles, tones, and interaction patterns to communicate intent and hierarchy within the interface.

## Properties

Configure the following properties on the `Button` component.

* command

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

  Default: '--auto'

  The action to perform on the target element specified by `commandFor`:

  * `'--auto'`: Execute the target's default action
  * `'--show'`: Display the target element
  * `'--hide'`: Hide the target element
  * `'--toggle'`: Switch the target's visibility state

  Learn more about [`command` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).

* commandFor

  string

  The ID of the target element that should respond to interactions (such as clicks) on this element. Used with `command` to control other components. Learn more about [`commandfor` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).

* disabled

  boolean

  Default: false

  Whether the field is disabled, preventing user interaction. Use when the field is temporarily unavailable due to application state, permissions, or dependencies.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

* loading

  boolean

  Default: false

  Indicates whether the button action is currently in progress. When `true`, typically displays a loading indicator and may disable interaction.

* tone

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

  Default: 'auto'

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

  * `'auto'` - Automatically determines the appropriate tone based on context.
  * `'neutral'` - The standard tone for general actions and interactions.
  * `'caution'` - Indicates actions that require careful consideration.
  * `'warning'` - Alerts users to potential issues or important information.
  * `'critical'` - Used for destructive actions like deleting or removing content.

* variant

  'primary' | 'secondary'

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

  The visual appearance and prominence of the button:

  * `'primary'`: High visual emphasis for the most important action
  * `'secondary'`: Less prominent appearance for supporting actions

## Events

The `Button` component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* click

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

  The callback when the element is activated.

### CallbackEvent

Represents the event object passed to callback functions when interactive events occur. Contains metadata about the event, including the target element, event phase, and propagation behavior.

* bubbles

  Whether the event bubbles up through the DOM tree.

  ```ts
  boolean
  ```

* cancelable

  Whether the event can be canceled.

  ```ts
  boolean
  ```

* composed

  Whether the event will trigger listeners outside of a shadow root.

  ```ts
  boolean
  ```

* currentTarget

  The element that the event listener is attached to.

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  Additional data associated with the event.

  ```ts
  any
  ```

* eventPhase

  The current phase of the event flow.

  ```ts
  number
  ```

* target

  The element that triggered the event.

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

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  /**
   * The element that the event listener is attached to.
   */
  currentTarget: HTMLElementTagNameMap[T];
  /**
   * Whether the event bubbles up through the DOM tree.
   */
  bubbles?: boolean;
  /**
   * Whether the event can be canceled.
   */
  cancelable?: boolean;
  /**
   * Whether the event will trigger listeners outside of a shadow root.
   */
  composed?: boolean;
  /**
   * Additional data associated with the event.
   */
  detail?: any;
  /**
   * The current phase of the event flow.
   */
  eventPhase: number;
  /**
   * The element that triggered the event.
   */
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Trigger actions with a button

  ##### Description

  Trigger actions using a \`Button\` component with customizable visual styles and tones. This example shows a basic button with text content.

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

## Best practices

* **Write action-oriented text:** Use specific, actionable language like "Save customer" or "Process payment" rather than generic terms like "OK" or "Submit."
* **Choose appropriate variants and tones:** Use `primary` for the main action and `secondary` for supporting actions. Use `critical` for destructive actions, `caution` or `warning` for actions requiring attention.
* **Show loading states:** Set `loading` to `true` during async operations to prevent duplicate submissions.
* **Use command system for component control:** Use `commandFor` and `command` to control modals and overlays declaratively.
* **Structure hierarchies clearly:** Group related actions together. Separate destructive actions to prevent accidental activation.