Choose a version:

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

Anchor to PropertiesProperties

Configure the following properties on the Button component.

Anchor to command 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.
Anchor to commandFor 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.
Anchor to disabled 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.
Anchor to id id string: A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
Anchor to loading loading boolean Default: false: Indicates whether the button action is currently in progress. When true, typically displays a loading indicator and may disable interaction.
Anchor to tone 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.
Anchor to variant 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

Anchor to EventsEvents

The button component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to click click (event: <"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.
```
boolean
```
cancelable
Whether the event can be canceled.
```
boolean
```
composed
Whether the event will trigger listeners outside of a shadow root.
```
boolean
```
currentTarget
The element that the event listener is attached to.
```
HTMLElementTagNameMap[T]
```
detail
Additional data associated with the event.
```
any
```
eventPhase
The current phase of the event flow.
```
number
```
target
The element that triggered the event.
```
HTMLElementTagNameMap[T] | null
```

Anchor to ExamplesExamples

Anchor to Trigger actions with a buttonTrigger 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

<s-button variant="primary">Add customer</s-button>

<s-button variant="secondary">Select more items</s-button>

Anchor to Best practicesBest 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.

Was this page helpful?