Primitives
Toggle
A button whose action has a persistent on/off state
Default variant
Outline variant
Usage
import { Toggle } from "@gpuixui/primitives";
import { useState } from "react";
const [grid, setGrid] = useState(true);
<Toggle pressed={grid} onPressedChange={setGrid} label="Grid" variant="outline">
Grid
</Toggle>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
pressed | boolean | — | controlled state |
defaultPressed | boolean | false | uncontrolled start |
onPressedChange | (pressed: boolean) => void | — | called with the new state |
variant | "default" | "outline" | "default" | no chrome at rest, or a border; a stored name the table does not carry reads as default |
size | "sm" | "md" | "lg" | "md" | from the density scale |
square | boolean | false | equal width and height, for an icon-only toggle |
disabled | boolean | false | out of the tab order, half opacity, no activation |
loading | boolean | false | a spinner, the busy word announced, activation refused |
loadingLabel | string | loading.busy ("Loading") | the busy word, announced as the description and the spinner's name; a blank one silences both |
reducedMotion | boolean | the motion provider | holds the busy spinner's lit dot; the prop overrides the provider |
leading / trailing | ReactNode | — | an icon or a count beside the label |
label | string | none | accessible name; required when icon-only |
description | string | none | announced help |
ref / aria-id / onLayout | host address | none | the button element is the addressed element |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with the toggle's own; yours runs first |
onMouseEnter / onMouseLeave | host handlers | none | forwarded to the host; the pair a Tooltip trigger needs |
aria-description | string | none | supplementary description; Tooltip passes the tip here |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StateStyle<ToggleState> | — | resolved against the live state, merged last |
children | ReactNode | — | the visible label |
testId | string | — | stable locator |
Keyboard
- EnterSpace
- toggles the pressed state
read from Toggle.tsx
Edit this page on GitHubpackages/primitives/docs/toggle.mdx