Component
ToggleButton
A button that holds a pressed/unpressed state, complete with aria-pressed accessibility.
Usage
Uncontrolled toggle button
tsx
<ToggleButton>Toggle Me</ToggleButton>
Custom Variants
Different variants for states
tsx
<ToggleButton pressedVariant="danger" unpressedVariant="ghost">
Toggle Danger
</ToggleButton>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultPressed | boolean | false | Initial state for uncontrolled usage. |
| pressed | boolean | undefined | Controlled pressed state. |
| onToggle | (pressed: boolean) => void | — | Callback when the state changes. |
| pressedVariant | ButtonVariant | 'primary' | Variant to use when pressed. |
| unpressedVariant | ButtonVariant | 'outline' | Variant to use when not pressed. |
Accepts all standard ButtonProps.