#ToggleButton

A button that stays pressed — for something the reader flips in place and can see the result of, like pinning a panel or holding a filter on. Reach for Switch when it belongs in a settings form, and SegmentedControl when one of several options has to win.

Source · Storybook

#Usage

import { ToggleButton } from '@wallarm-org/design-system/ToggleButton';

#Examples

#Variants and colors

outline reads as a control that is always there; ghost disappears until needed, for toolbars. brand tints the pressed state, neutral keeps it grey for when several toggles sit together and colour would shout.

#Sizes

Three heights matching Button, so a toggle can sit in a row of them without breaking the line.

#Disabled

Both states while disabled. A disabled toggle still shows whether it is on, which is the point — say elsewhere why it cannot be changed.

#Loading

For a toggle whose effect is a request. It keeps the label's footprint and disables itself, so the pressed state does not flicker while the answer is in flight.

#Icons

An icon before or after the label. Pressed state is carried by the whole button, not the icon, so don't swap the icon to signal it.

#Icon only

The toolbar case: an icon alone squares the button off. aria-label is doing all the naming here, so it is not optional.

#Controlled

Pass active and own the state when something else has to move with it — a panel opening, a filter applying. Once active is set the button stops tracking itself.

#Props