Toggle API
View componentThe full prop reference for the Toggle component. A two-state button that can be on or off.
Import
import { Toggle } from '@structyl/styled';Props
Toggle
A button component that toggles between pressed and unpressed states. Combines a headless primitive with styled variants, sizes, and colors.
| Prop | Type | Default |
|---|---|---|
| pressed# | booleanControlled pressed state (true when active/on, false when inactive/off) | — |
| defaultPressed# | booleanUncontrolled initial pressed state | false |
| onPressedChange# | (pressed: boolean) => voidCallback fired when the pressed state changes | — |
| disabled# | booleanDisables the toggle, preventing interaction and reducing opacity | — |
| asChild# | booleanIf true, renders as its child element instead of a button | — |
| variant# | 'default' | 'outline'Visual variant style (default has transparent background; outline has border) | 'default' |
| color# | 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'Color scheme applied when pressed/active (data-state=on) | 'default' |
| size# | 'sm' | 'default' | 'lg'Button size (sm: h-9 px-2.5; default: h-10 px-3; lg: h-11 px-5) | 'default' |
| className# | stringTailwind CSS classes merged with variant styles | — |
| children# | React.ReactNodeButton content (text, icons, or elements) | — |
Source code
If you didn't find what you need here, read the component implementation .