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

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.

Anchor to examplesExamples

Anchor to example-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>

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
```
<s-button variant="primary">Add customer</s-button>
<s-button variant="secondary">Select more items</s-button>
```

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
```

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;
}

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?