Switch
Turn a setting on or off.
Preview
Import
import { Switch } from "@sigil-ui/components";Usage
<div className="flex flex-col gap-3">
<Switch label="Email notifications" defaultChecked />
<Switch label="Push notifications" />
<Switch label="SMS alerts" disabled />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | — | — |
label | string | — | — |
thumbIcon | ReactNode | — | Content rendered inside the thumb (e.g. an icon). |
thumbClassName | string | — | Additional classes applied to the thumb element. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-full | Radius full |
--s-border | Border |
--s-primary | Primary |
--s-duration-fast | Duration fast |
--s-ring | Ring |
--s-ring-offset | Ring offset |
--s-background | Background |
--s-shadow-sm | Shadow sm |
--s-text | Text |