Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Controlled#
Use pressed and onPressedChange for controlled state.
Controlled
Sizes#
Available in multiple sizes.
Sizes
Colors#
Toggle supports different color variants.
Colors
Variants#
Different visual styles for toggles.
Variants
With Icons#
Toggles work great with icons for toolbar-style buttons.
With Icons
Disabled#
Disabled
Usage#
Import
import { Toggle } from "@sugarcoat/ui-nxt";Usage
<Toggle
pressed={isPressed}
onPressedChange={setIsPressed}
>
Toggle me
</Toggle>Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| pressed | boolean | - | Whether the toggle is pressed (controlled) |
| defaultPressed | boolean | false | Initial pressed state (uncontrolled) |
| onPressedChange | (pressed: boolean) => void | - | Callback when pressed state changes |
| size | "sm" | "md" | "lg" | "md" | Size of the toggle button |
| color | "default" | "primary" | "accent" | "default" | Color variant |
| variant | "outline" | "ghost" | "solid" | "outline" | Visual style variant |
| disabled | boolean | false | Whether the toggle is disabled |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
Accessibility#
- Built on Base UI Toggle for robust accessibility
- Uses
aria-pressedto communicate state to screen readers - Supports keyboard activation with Space and Enter keys
- Focus visible styles included for keyboard users
- Use
aria-labelwhen toggle only contains an icon