Toggle
Two-state button. Default uses tray fill when off, primary when on. Size matches Button (h-8 default).
Basic Toggle
Default variant with tray fill, transitions to primary blue when activated.
Toggle Variants
Different visual styles for various contexts.
Default (Tray Fill → Primary)
Outline (Transparent → Tray)
Ghost (Minimal)
Toggle Sizes
Multiple size options matching Button sizes (h-7, h-8, h-10).
Icon Toggles
Compact icon-only toggles for toolbars and dense UIs.
Text Formatting Toolbar
Ghost toggles in a toolbar pattern within a white capsule.
Theme Toggle
A practical theme toggle example.
Appearance
Toggle between light and dark mode
Inverted Context
Capsule variant (white fill) for use on tray backgrounds.
Quick Actions
Disabled State
Toggles can be disabled when interaction is not allowed.