Toggle
A two-state button that stays pressed until pressed again.
<Toggle aria-label="Toggle bold" size="icon"> <HugeiconsIcon icon={TextBoldIcon} /></Toggle>Installation
$ npx shadcn@latest add @constella/toggleUsage
import { Toggle } from "@/components/primitives/toggle";<Toggle>Toggle</Toggle>Variant
Use the variant prop for an outline toggle. Pressed, both fill.
| Variant | At rest |
|---|---|
default | No fill |
outline | A border edge |
<Toggle variant="outline">Underline</Toggle>Size
Use the size prop to match the controls beside it, with Button's sizes. Use an icon size for a square, icon-only toggle.
| Size | Icon size | Height |
|---|---|---|
sm | icon-sm | 28px |
default | icon | 32px |
lg | icon-lg | 36px |
<Toggle size="icon-sm" aria-label="Toggle italic"> …</Toggle>Disabled
<Toggle disabled>…</Toggle>API Reference
| Part | Adds |
|---|---|
Toggle | variant: "default" or "outline"; size: "sm", "default", "lg", "icon-sm", "icon" or "icon-lg" |
Toggle takes sx, applied last. toggleStyles gives its styles to another element. For the rest, see Base UI Toggle.