Forms · Application UI
Toggle
Two-state pressable toggle button with variant and size styles.
@byronwade/foundation@byronwade/utils@base-ui/reactclass-variance-authority
Feature showcase
Installation
Features
6 examples
Default, Variants, Sizes, With Text, Disabled, Controlled.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "default" | Visual style. |
| size | "default" | "sm" | "lg" | "default" | Button dimensions. |
| pressed | boolean | - | Controlled pressed state. |
| defaultPressed | boolean | - | Initial pressed state. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @base-ui/react | npm | Installed from npm. |
| class-variance-authority | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/toggle.tsx |
| Default example | content/examples/toggle/default.tsx |
| Variants example | content/examples/toggle/variants.tsx |
| Sizes example | content/examples/toggle/sizes.tsx |
| With Text example | content/examples/toggle/with-text.tsx |
| Disabled example | content/examples/toggle/disabled.tsx |
| Controlled example | content/examples/toggle/controlled.tsx |