Toggle
Toggle Buttons allow users to toggle a selection on or off, for example switching between two states or modes.
Installation
CLI
Manual
npx hq-kit add toggle
Basic
Preview
Code
Single Toggle Button
Variant
If you chose ghost
variant, make sure you set different text or icon for toggled an untoggled state
Preview
Code
Size
Preview
Code
Shape
Preview
Code
Icon
Preview
Code
Controlled
You can control the state of the toggle button by passing a isSelected
prop.
Preview
Code
{
"isSelected": false
}
Disabled
Preview
Code
Toggle Group
You can group multiple toggle buttons into a toggle group by wrap them in a <Toggle.Group>
.
Preview
Code
Orientation
You can change the orientation of the toggle group by passing an orientation
prop.
Preview
Code
Selection Mode
You can change the selection mode of the toggle group by passing a selectionMode
prop.
Preview
Code
SingleMultiple
Variant
Preview
Code
Controlled
You can control the state of the toggle group by passing a selectedKeys
prop.
Preview
Code
[
"bold"
]
Disabled
Preview
Code