Choose a version:

Press button

The press button component lets buyers toggle between active and inactive states. Use press button for persistent on/off or selected/unselected choices.

Press buttons provide visual feedback for pressed and unpressed states. For binary controls that take effect immediately without a save action, use switch instead.

Press button supports only a binary toggle state (pressed or unpressed). Multi-state or tri-state toggles aren't supported.

Support

Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the press button component.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. Use this when the visible content alone doesn't provide enough context.
Anchor to defaultPressed defaultPressed boolean Default: false: Whether the button is pressed by default.
Anchor to disabled disabled boolean Default: false: Whether the button is disabled, preventing it from being clicked or receiving focus.
Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
Anchor to inlineSize inlineSize 'auto' | 'fill' | 'fit-content' Default: 'auto': The inline width of the button component.

'auto': The size depends on the surface and context.

'fill': The button takes up 100% of the available inline size.

'fit-content': The button takes up the minimum inline size required to fit its content.
Anchor to lang lang string: The language of the button's text content. Use this when the button text is in a different language than the rest of the page, so assistive technologies can invoke the correct pronunciation. See the reference of values (Subtag label).
Anchor to loading loading boolean Default: false: Whether the button is in a loading state, which replaces the button content with a loading indicator while a background action is being performed. This also disables the button.
Anchor to pressed pressed boolean Default: false: Whether the button is pressed.

Anchor to EventsEvents

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

Anchor to blur blur <typeof tagName>: A callback fired when the button loses focus.

Learn more about the blur event.
Anchor to click click <typeof tagName>: A callback fired when the button is clicked.

Learn more about the click event.
Anchor to focus focus <typeof tagName>: A callback fired when the button receives focus.

Learn more about the focus event.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to ExamplesExamples

Anchor to Toggle optional selectionsToggle optional selections

Let buyers opt in to add-ons with a toggle button. This example shows an s-press-button element for gift wrapping.

Toggle optional selections

A rendered example of the press-button component

html

<s-press-button>Add gift wrapping</s-press-button>

Anchor to Pre-select an optionPre-select an option

Start an option in its selected state on first load. This example uses an s-press-button with the pressed attribute for a pre-selected option that the buyer can toggle off.

html

<s-press-button pressed>Gift wrapping included</s-press-button>

Anchor to Disable an unavailable optionDisable an unavailable option

Show a toggle in a non-interactive state when the option isn't available for the current order. This example displays an s-press-button with the disabled attribute for an unavailable shipping method.

html

<s-press-button disabled>Express shipping</s-press-button>

Anchor to Best practicesBest practices

Write clear toggle labels: Use text that describes the option being toggled, such as "Add gift wrapping" rather than "Toggle" or "On/Off."
Pre-select recommended options: Use defaultPressed when an option is commonly chosen, so buyers start with the recommended selection.
Disable rather than hide: When an option is temporarily unavailable, use the disabled attribute to keep it visible and set expectations.
Use for binary choices only: Press button represents on/off states. For multi-option selections, use choice list instead.

Was this page helpful?