Toggle
A button that stays pressed — on its own, or welded into a group that remembers one choice.
Loading documentation…
Powered by heyo
A Toggle is a button that stays pressed: bold in an editor, a filter chip, a
view mode. On its own it is a single on/off control; inside a ToggleGroup it
becomes one of a set.
ghost is the default — invisible until hovered, which is what an editor
toolbar wants. outline draws its own edge and suits a standalone filter.
A group is single-choice by default. Pass multiple and it behaves like a set
of checkboxes — several filters at once.
attached welds the buttons into one control, the way
ButtonGroup does. equal gives every toggle the width
of the widest one — on by default for a vertical group, where ragged right
edges look like a mistake rather than a choice.
The value this toggle contributes inside a group.
Controlled and uncontrolled state, for a standalone toggle.
Fires when the toggle flips.
It defaults to ghost.
It defaults to base.
Forces a square, icon-only shape. Implied when there is no label.
The glyph — a component, an element, or any node.
Dims the control and ignores interaction.
Controlled and uncontrolled selection. Always an array, even when single.
Fires when the selection changes.
Allows several toggles to be pressed at once.
Welds the buttons into a single control.
Gives every toggle the width of the widest. It defaults to true for
vertical, false for horizontal.
The layout axis. It defaults to horizontal.
Dims every toggle in the group.