Toggle
A two-state button for an on/off formatting or view option.
A two-state button for an on/off formatting or view option.
Import
import { Toggle } from 'bmates-ui';Basic usage
The example below mirrors the primary Storybook composition and can be used as a starting point.
<Toggle aria-label="Toggle bold">Bold</Toggle>Preview
<Toggle aria-label="Toggle bold">Bold</Toggle>Prop previews
The examples below isolate the props that change visual output or interaction.
Sizes
<Toggle size="lg">B</Toggle>Selection states
<Toggle selected>Selected</Toggle>Component API
selected
Initial pressed state. Updates when the prop changes.
size
Toggle size.
disabled
Prevents interaction. Native button props are supported.
Usage notes
- Every component in the table is exported from
bmates-ui. - Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
- For application-owned state, use a controlled value and its change handler instead of only a
default*prop.
