Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

ToggleButton

Options inside the ToggleButtonGroup component.

Support
Targets (50)

Supported targets

Anchor to ToggleButtonPropsToggleButtonProps

Anchor to id
id
string
required

A unique identifier for the toggle button.

Anchor to accessibilityLabel
accessibilityLabel
string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

Anchor to disabled
disabled
boolean

Disables the button, disallowing any interaction.

Anchor to onPress
onPress
() => void

Callback when button is pressed.

Anchor to ExamplesExamples

Anchor to Basic ToggleButtonBasic ToggleButton

Basic ToggleButton

Example

Basic ToggleButton

import {
reactExtension,
ToggleButton,
ToggleButtonGroup,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<ToggleButtonGroup
value="none"
onChange={(value) => {
console.log(
`onChange event with value: ${value}`,
);
}}
>
<ToggleButton id="none">None</ToggleButton>
</ToggleButtonGroup>
);
}
import {
extension,
ToggleButtonGroup,
ToggleButton,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const toggleButtonGroup = root.createComponent(
ToggleButtonGroup,
{
value: 'none',
onChange: (value) => {
console.log(`onChange event with value: ${value}`);
},
},
[root.createComponent(ToggleButton, {id: 'none'}, 'None')],
);

root.appendChild(toggleButtonGroup);
});

Anchor to RelatedRelated

ComponentToggleButtonGroup
Was this page helpful?