Toggle
A button that stays on, for a mode the next action uses
Text modes
Outline
Usage
import { Toggle } from "@gpuixui/components/toggle";
<Toggle pressed={bold} onPressedChange={setBold} label="Bold">
Bold
</Toggle>;
// An icon-only toggle still needs a name.
<Toggle square label="Grid view" leading={<Icon name="grid" color={colour} />} />;A toggle is not a Switch: a switch changes a setting immediately, while a
toggle sets a mode for the next action ("bold", "grid view") and lives in a
toolbar beside other actions.
Keyboard
Enter activates on the key press and Space on the release, the platform's
button contract; a held key does not repeat the activation.
API
| Prop | Type | Default |
|---|---|---|
pressed | boolean | — (uncontrolled) |
defaultPressed | boolean | false |
onPressedChange | (pressed: boolean) => void | — |
variant | "default" | "outline" | "default" |
size | "sm" | "md" | "lg" | "md" |
square | boolean | false |
disabled | boolean | false |
loading | boolean | false |
loadingLabel | string | the provider's loading.busy |
reducedMotion | boolean | the motion provider |
leading / trailing | ReactNode | — |
label | string | the text children |
description | string | — |
style | StateStyle<ToggleState> | — |
className | string | — |
testId | string | — |
ref / aria-id / onLayout | host props | — |
Edit this page on GitHubpackages/components/docs/toggle.mdx