Toggle

A button that stays pressed: bold in a toolbar, a pinned item, a filter.

Installation

npx @yolkui/cli add toggle

Outline

variant="outline" keeps a border at rest. On, it fills a step lighter than the default toggle, so the border still shows.

Sizes

Button's four sizes, 28 · 32 · 36 · 40, with the same padding: the side holding an icon is tighter. An icon alone makes a square toggle at every size, with no size of its own.

xs · 28

sm · 32

default · 36

lg · 40

Item state

For a mode or format (bold, a view, a filter) the pressed background says it is on. For the state of an item (saved, starred, pinned) add fill: the icon fills while on, so the shape carries the state and it reads without colour. fill works with every variant; variant="ghost" drops the background when on, so the icon alone says it. Use an icon that has a filled form.

Disabled

A disabled toggle fades and cannot change. It stays focusable and keeps pointer events, so a Tooltip around it can say why, on hover and on keyboard focus.

Accessibility

Screen readers hear the name, "toggle button" and whether it is pressed, and "dimmed" when disabled. Space and Enter toggle it.

Keep the name the same in both states: aria-pressed already says on or off. A name that changes ("Bookmark" / "Remove bookmark") as well is read as "Remove bookmark, pressed", which contradicts itself.
An icon-only toggle needs an aria-label.
Use a Switch for a setting that takes effect at once, a Toggle for a tool or a state you switch while working.
Several toggles that belong together (a formatting toolbar) go in a ToggleGroup: one tab stop and arrow keys between them.