Toggle
A button that stays pressed.
Default
Three toggles, one of them pressed to start with.
Bold, italic, mute: a button whose state is part of what it means. It is announced as pressed or not, which a plain button never is.
Installation
npx philcn@latest add toggleThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| Toggle.pressed | boolean | Controlled: pressed or not. |
| Toggle.defaultPressed | boolean | Uncontrolled: how it starts. |
| Toggle.onPressedChange | ((pressed: boolean) => void) | Called with the new state on every press. |
| Toggle.variant | "default" | "outline" | null | Plain, or outlined. |
| Toggle.size | "default" | "lg" | "sm" | null | Three heights, like the Button's. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- A toggle holding only a glyph needs `aria-label`: the letter B tells a screen reader nothing.