Choose a version:

ToggleButton

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.

ToggleButtonProps

id
A unique identifier for the toggle button.
```
string
```
accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
onPress
Callback when button is pressed.
```
() => void
```

export interface ToggleButtonProps {
  /**
   * A unique identifier for the toggle button.
   */
  id: 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.
   */
  accessibilityLabel?: string;
  /**
   * Disables the button, disallowing any interaction.
   */
  disabled?: boolean;
  /**
   * Callback when button is pressed.
   */
  onPress?(): void;
}

Was this section helpful?

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}`,

);

}}

</ToggleButtonGroup>

);

}

examples

Basic ToggleButton

React

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>
  );
}

JS

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);
});

Preview

Anchor to relatedRelated

ComponentToggleButtonGroup