Toggle
ButtonsPressable toggle that maintains on / off state.
Hard-edge switch that slides a thumb from left (off, gray) to right (on, Neo Green). Use ToggleGroup for mutually exclusive or multi-select toolbar button sets.
Usage
import { Toggle } from "nosible-ux"
export default function Example() {
return <Toggle label="Pre-market signals" />
}Examples
With label
Sizes
Controlled
Accessibility
Built on Radix Switch: role="switch", aria-checked state, and keyboard activation (Space) are handled automatically. When label is provided it is linked via htmlFor.
Props
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | — | When true, renders the child element instead of a button (Radix Slot pattern). |
defaultPressed | boolean | undefined | false | The state of the toggle when initially rendered. Use `defaultPressed` if you do not need to control the state of the toggle. |
intent | "default" | "outline" | null | undefined | — | |
onPressedChange | ((pressed: boolean) => void) | undefined | — | The callback that fires when the state of the toggle changes. |
pressed | boolean | undefined | — | The controlled state of the toggle. |
size | "sm" | "md" | "lg" | "icon" | null | undefined | — |