---
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.
Support
Targets (24)
### Supported targets
* [pos.cart.line-item-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-menu-item-)
* [pos.cart.line-item-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-)
* [pos.customer-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-menu-item-)
* [pos.customer-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-)
* [pos.customer-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-block-)
* [pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-menu-item-)
* [pos.draft-order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.draft-order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-block-)
* [pos.exchange.post.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-menu-item-)
* [pos.exchange.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-)
* [pos.exchange.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-block-)
* [pos.home.modal.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-)
* [pos.order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-menu-item-)
* [pos.order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-)
* [pos.order-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-block-)
* [pos.product-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-menu-item-)
* [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-)
* [pos.product-details.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-block-)
* [pos.purchase.post.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-menu-item-)
* [pos.purchase.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-)
* [pos.purchase.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-block-)
* [pos.return.post.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-menu-item-)
* [pos.return.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-)
* [pos.return.post.block.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-block-)
#### Use cases
* **Primary actions:** Create actions like "Save changes," "Add customer," or "Process payment" that complete workflows.
* **Secondary actions:** Provide supporting actions such as "Cancel," "Edit," or "View details."
* **Navigation:** Enable screen transitions or launch modal experiences for complex operations.
* **Loading states:** Display loading indicators during asynchronous operations while preventing duplicate submissions.
## Examples
### Trigger actions with a button
Trigger actions using a `Button` component with customizable visual styles and tones. This example shows a basic button with text content.
## Trigger actions with a button
### 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
Add customer
Select more items
```
## 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 {
/**
* 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;
}
```
## 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.