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.

Choose a version:

ToggleButton

The toggle button component creates individual selectable options within a toggle button group. Each toggle button represents one choice that customers can select.

Toggle buttons support labels and values for form submission.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the ToggleButton component.

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 Create a toggle optionCreate a toggle option

Use toggle button to define an individual selectable option inside a toggle button group. This example shows a single toggle button within its parent group.

Create a toggle option

A toggle button in a selectable state within a button group

Create a toggle option

import {

reactExtension,

ToggleButton,

ToggleButtonGroup,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

<ToggleButtonGroup

value="none"

onChange={(value) => {

console.log(

`onChange event with value: ${value}`,

);

}}

</ToggleButtonGroup>

);

}

import {

extension,

ToggleButtonGroup,

ToggleButton,

} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.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);

});

React

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

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ToggleButtonGroup
      value="none"
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <ToggleButton id="none">None</ToggleButton>
    </ToggleButtonGroup>
  );
}

JS

import {
  extension,
  ToggleButtonGroup,
  ToggleButton,
} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.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 Best practicesBest practices

Keep labels short: Use concise labels that fit within the button without wrapping.
Use consistent sizing: Keep all toggle buttons in a group roughly the same width for visual balance.

Anchor to LimitationsLimitations

Must be used as a child of toggle button group.

Was this page helpful?