Design System v1.0

Toggle

Buttons that hold a pressed state, individually or as a group.

Formatting toolbar

Text-formatting toggles for bold, italic, and alignment.

Filled icon

An icon toggle that fills when pressed.

Icon pattern

A recommended icon-plus-label toggle pattern.

Group sizes

A toggle group shown across the size scale.

Group layout

Horizontal and vertical toggle group arrangements.

Group with tooltips

A toggle group where each option has a tooltip.

API reference

A two-state button that holds a pressed/on state.

Full props on Base UI Toggle
Anatomy
TogglePressable button toggling a pressed/on state.
Props
PartPropTypeDefaultDescription
Togglevariant"default" | "outline""default"Style: default (transparent) or outline (bordered).
Togglesize"default" | "sm" | "lg""default"Size: default, sm, or lg.

Command Palette

Search for a command to run...