Skip to main content

Button

Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use Button to let users perform specific tasks or initiate interactions throughout the interface. Buttons can also function as links, guiding users to internal or external destinations.

Anchor to propertiesProperties

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

Use this when using only an icon or the button text is not enough context for users using assistive technologies.

Anchor to command
command
'--auto' | '--show' | '--hide' | '--toggle' | '--copy'
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.
  • --copy: copies the target ClipboardItem.
Anchor to commandFor
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.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, meaning it cannot be clicked or receive focus.

Anchor to href
href
string

The URL to link to.

  • If set, it will navigate to the location specified by href after executing the click event.
  • If a commandFor is set, the command will be executed instead of the navigation.
Anchor to id
id
string

A unique identifier for the element.

Anchor to inlineSize
inlineSize
'auto' | 'fill' | 'fit-content'
Default: 'auto'

The displayed inline width of the button.

  • auto: the size of the button depends on the surface and context.
  • fill: the button will takes up 100% of the available inline size.
  • fit-content: the button will take up the minimum inline-size required to fit its content.
Anchor to loading
loading
boolean
Default: false

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

This also disables the button.

Anchor to target
target
'auto' | '_blank'

Specifies where to display the linked URL.

Anchor to tone
tone
'auto' | 'neutral' | 'critical'

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

Anchor to type
type
'submit' | 'button'

The behavior of the button.

  • submit: Used to indicate the component acts as a submit button, meaning it submits the closest form.
  • button: Used to indicate the component acts as a button, meaning it has no default action.
  • reset: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).

This property is ignored if the component supports href or commandFor/command and one of them is set.

Anchor to variant
variant
'auto' | 'primary' | 'secondary'

Changes the visual appearance of the Button.

Was this section helpful?

Anchor to eventsEvents

Anchor to click
click
((event: <typeof tagName>) => void) | null

Callback when the button is activated. This will be called before the action indicated by type.

Was this section helpful?

Code

<s-button variant="secondary">Cancel</s-button>
<s-button variant="primary">Save</s-button>

Preview

Anchor to best-practicesBest Practices

Content Best Practices

  • Clearly label each button to accurately represent the action associated with it.

  • Use strong actionable verbs at the beginning of button text to make it clear to the user what action will occur when the button is clicked.

Hierarchy Best Practices

  • Establish a visual hierarchy between buttons to minimize confusion and help users understand which actions are most important.

  • Use only one high-emphasis button (primary button) per context to make it clear that other buttons have less importance.

  • Use lower-emphasis buttons for secondary calls to action.

  • Use primary buttons for actions that progress users through checkout such as “Pay now” or for concluding an action in a modal such as “Apply”.

  • Use secondary buttons to provide alternative actions to the primary button, without disrupting the primary flow such as “Track your order”.

When to Use Buttons

  • Use buttons to communicate actions the user can take.

  • Use buttons to allow users to interact with the page.

When Not to Use Buttons

  • Don’t use buttons as navigational elements. Use links instead when the desired action is to take the user to a new page.
Was this section helpful?