Toggle
Options inside a ToggleButtonGroup.
string
required
A unique identifier for the toggle button.
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.
boolean
Disables the button, disallowing any interaction.
() => void
Callback when button is pressed.
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}`,
);
}}
>
<ToggleButton id="none">None</ToggleButton>
</ToggleButtonGroup>
);
}
Preview
