Toggle

Installation

Package

@bigbang/ui

Import

import { Toggle } from '@bigbang/ui';

Source

Toggle.tsx

Storybook

Toggle · Playground

Toggle is in the @bigbang/ui package.

import { Toggle } from '@bigbang/ui';

<Toggle icon="bold" label="Bold" />;
<Toggle pressed={pressed} onPressedChange={setPressed}>Item</Toggle>;

Props

children

Description

Visible text. When it is set the text names the toggle and label is optional.

Type

ReactNode

label

Description

Accessible name; overrides the visible text. Accessible name. Required for an icon-only toggle.

Type

string

icon

Description

Registered icon name, shown before the text or alone.

Type

IconName

pressed

Description

Pressed state when you control it. Use it with onPressedChange.

Type

boolean

defaultPressed

Description

Pressed state on first render when you do not control it.

Type

boolean

Default

false

onPressedChange

Description

Called with the new pressed state when the user switches the toggle.

Type

(pressed: boolean) => void

value

Description

Value of the item inside a ToggleGroup. Required there; ignored outside a group.

Type

string

variant

Description

tertiary has no border until pressed and suits toolbars; secondary keeps a border in both states.

Type

'tertiary' | 'secondary'

Default

'tertiary'

size

Description

Height of 32, 36 or 40 px, matching the Button heights.

Type

'sm' | 'md' | 'lg'

Default

'md'

disabled

Description

Turns off interaction and removes the toggle from the tab order.

Type

boolean

Default

false

className

Description

For layout only: margins and placement.

Type

string

Data attributes

• data-component="toggle": on the root <button>.
• data-pressed: while pressed, from Base UI.
• data-disabled: while disabled.