HQ UI

Toggle

Toggle Buttons allow users to toggle a selection on or off, for example switching between two states or modes.

Installation

In the terminal, run the following command to begin:
npx hq-kit add toggle

Basic

Single Toggle Button

Variant

If you chose ghost variant, make sure you set different text or icon for toggled an untoggled state

Size

Shape

Icon

Controlled

You can control the state of the toggle button by passing a isSelected prop.

{ "isSelected": false }

Disabled

Toggle Group

You can group multiple toggle buttons into a toggle group by wrap them in a <Toggle.Group>.

Orientation

You can change the orientation of the toggle group by passing an orientation prop.

Selection Mode

You can change the selection mode of the toggle group by passing a selectionMode prop.

Single
Multiple

Variant

Controlled

You can control the state of the toggle group by passing a selectedKeys prop.

[ "bold" ]

Disabled