Toggle
A two-state button that can be either on or off.
Usage
API Reference
Along with inheriting all props from the Radix Toggle primitive, this component also supports all Button
component props, except for the variant
prop, which is limited to outline
and transparent
options.
Prop | Value | Default |
---|---|---|
after | ReactElement<HTMLElement> | / |
asChild | boolean | false |
before | ReactElement<HTMLElement> | / |
defaultPressed | boolean | / |
destructive | boolean | false |
disabled | boolean | false |
isIconOnly | boolean | false |
onPressedChange | function | / |
pressed | boolean | / |
shape | "rounded" | "pill" | "rounded" |
size | "xs-icon" | "sm" | "md" | "md" |
variant | "outline" | "transparent" | "transparent" |
Data attribute | Value |
---|---|
[data-disabled] | Present when disabled |
[data-state] | "on" | "off" |
Accessibility
The Toggle
component supports all accessibility features of the Radix Toggle primitive.