active
Description
If true, the toggle button is represented as active.
Type
booleanDefault
falseToggle
Toggle is a component that has two states: on or off.
Props
ToggleProps
colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"gray"defaultIsSelected
DeprecatedDescription
If true, the toggle button will be initially selected.
Deprecated
Use defaultSelected instead.
Type
booleanDefault
falsedefaultSelected
Description
If true, the toggle button will be initially selected.
Type
booleanDefault
falsedisableRipple
Description
If true, disable ripple effects when pressing a element.
Type
booleanDefault
falsefullRounded
Description
If true, the toggle button is full rounded. Else, it'll be slightly round.
Type
booleanDefault
falseicon
Description
The icon to be used in the button.
Type
ReactElement<any, string | JSXElementConstructor<any>>isActive
DeprecatedDescription
If true, the toggle button is represented as active.
Deprecated
Use active instead.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the toggle button will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the toggle button will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRounded
DeprecatedDescription
If true, the toggle button is full rounded. Else, it'll be slightly round.
Deprecated
Use fullRounded instead.
Type
booleanDefault
falseisSelected
DeprecatedDescription
If true, the toggle button will be selected.
Deprecated
Use selected instead.
Type
booleanonChange
Description
The callback invoked when selected state changes.
Type
(selected: boolean) => voidreadOnly
Description
If true, the toggle button will be readonly.
Type
booleanDefault
falseselected
Description
If true, the toggle button will be selected.
Type
booleansize
Description
The size of the Toggle.
Type
"xs" | "sm" | "md" | "lg"Default
"md"value
Description
The value of the toggle button.
Type
Yvariant
Description
The variant of the Toggle.
Type
"outline" | "solid" | "subtle" | "unstyled"Default
"subtle"ToggleGroupProps
defaultValue
Description
The initial value of the toggle button group.
Type
NonNullable<Y extends any[] ? Y : Y | undefined>direction
DeprecatedDescription
The CSS flex-direction property.
Deprecated
Use flexDirection instead.
Type
UIValue<FlexDirection>disabled
Description
If true, all wrapped toggle button will be disabled.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, all wrapped toggle button will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, all wrapped toggle button will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseonChange
Description
The callback fired when any children toggle button is selected or unselected.
Type
(value: Y extends any[] ? Y : Y | undefined) => voidreadOnly
Description
If true, all wrapped toggle button will be readonly.
Type
booleanDefault
falsevalue
Description
The value of the toggle button group.
Type
NonNullable<Y extends any[] ? Y : Y | undefined>Edit this page on GitHub