[ Web Proxy ]
URL:
Viewing: https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button [Back]  [Original]
Press buttonSkip to main content
Docs page [Docs page]Docs page [Docs page]
Collapse sidebar
UI Extension Icon [UI Extension Icon]
Polaris
Checkout
Choose a version:
2026-10 release candidate2026-07 latest2026-04 2026-01 2025-10 2025-07
    • Targets
    • Target APIs
    • Web components
Full index
Choose a version:
2026-10 release candidate2026-07 latest2026-04 2026-01 2025-10 2025-07

Press button

Install AI ToolkitAsk about this pageCopy MD

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 Use casesUse cases

  • Add-on selections: Let buyers opt in to extras like gift wrapping, shipping insurance, or express delivery.
  • Preference toggles: Allow buyers to toggle preferences such as marketing opt-in or paperless receipts.
  • Feature toggles: Enable or disable optional features like order notes or delivery instructions.
  • Default selections: Pre-select recommended options using defaultPressed so buyers start with a suggested choice.

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
CallbackEventListener<typeof tagName>

A callback fired when the button loses focus.

Learn more about the blur event.

Anchor to click
click
CallbackEventListener<typeof tagName>

A callback fired when the button is clicked.

Learn more about the click event.

Anchor to focus
focus
CallbackEventListener<typeof tagName>

A callback fired when the button receives focus.

Learn more about the focus event.

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 [A rendered example of the press-button component]

html

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

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

Copy
<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?
YesNo
Web Proxy Viewer  |  New URL  |  Original Page