Toggle
A two-state button that stays pressed, for on/off options like bold text, pinning a topic or watching a thread.
Preview
Usage
import { Toggle } from '@vitnode/core/components/ui/toggle'<Toggle aria-label="Bold">
<BoldIcon />
</Toggle>A toggle is a button with memory. Screen readers hear it as pressed or not
pressed, thanks to aria-pressed.
Controlled
<Toggle onPressedChange={setIsWatching} pressed={isWatching}>
Watch thread
</Toggle>Pair pressed with onPressedChange, or use defaultPressed when you don't
need the state.
Outline
The outline variant adds a border, so the toggle reads as a control even when
it's off.
<Toggle aria-label="Pin topic" variant="outline">
<PinIcon />
</Toggle>Sizes
With text
Put data-icon="inline-start" (or inline-end) on the icon to tighten the
padding on that side.
<Toggle variant="outline">
<BookmarkIcon data-icon="inline-start" />
Bookmark
</Toggle>Disabled
<Toggle disabled>Lock topic</Toggle>Accessibility
- Icon-only toggles need an
aria-label. - Keep the label the same in both states. "Bold" pressed says it all; swapping it to "Not bold" confuses screen readers.
- Need several related toggles? Use Toggle Group.
Props
Prop
Type