Choose a version:

Press button

Allows users to toggle between active/inactive states. Use to represent a persistent on/off or selected/unselected status.

Support

Targets (29)

Supported targets

purchase.checkout.actions.render-before
purchase.checkout.block.render
purchase.checkout.cart-line-item.render-after
purchase.checkout.cart-line-list.render-after
purchase.checkout.contact.render-after
purchase.checkout.delivery-address.render-after
purchase.checkout.delivery-address.render-before
purchase.checkout.footer.render-after
purchase.checkout.header.render-after
purchase.checkout.payment-method-list.render-after
purchase.checkout.payment-method-list.render-before
purchase.checkout.pickup-location-list.render-after
purchase.checkout.pickup-location-list.render-before
purchase.checkout.pickup-location-option-item.render-after
purchase.checkout.pickup-point-list.render-after
purchase.checkout.pickup-point-list.render-before
purchase.checkout.reductions.render-after
purchase.checkout.reductions.render-before
purchase.checkout.shipping-option-item.details.render
purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-list.render-after
purchase.checkout.shipping-option-list.render-before
purchase.thank-you.announcement.render
purchase.thank-you.block.render
purchase.thank-you.cart-line-item.render-after
purchase.thank-you.cart-line-list.render-after
purchase.thank-you.customer-information.render-after
purchase.thank-you.footer.render-after
purchase.thank-you.header.render-after

Anchor to propertiesProperties

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

Learn more about registering 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];
}

Examples

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

Preview

Was this page helpful?

Press button

Supported targets

Supported targets

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

Preview

Examples

Code

Default