Toggle

Button heights, surface-3 fill when pressed, flat — no lift, no shadow. A mode in a toolbar; an on/off setting with a label is a Switch.

import { Toggle } from "@stocklots/ui-components/components/toggle";

<Toggle aria-label="Bold"><Bold /></Toggle>

Variants

Bold / Italic, pressed and unpressed, default and outline.

Sizes

sm 32px, default 40px, lg 48px.

Disabled

Disabled while the editor is read-only. Say why beside the control.

Read-only document

With text