Components · Actions

Toggle

A button with an on/off state, driven by aria-pressed — for formatting controls and view switches. It reads as a ghost button when off and holds a muted fill when on. Group several into a toolbar segment for mutually-related options.

Preview

A toggle group; the first is pressed (on), the last is disabled.

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

toggle

backgroundColor: transparent
textColor: {colors.muted}
borderColor: transparent
borderWidth: 1px
borderRadius: {rounded.base}
fontFamily: Geist
fontSize: 14px
fontWeight: 500
height: 32px
minWidth: 32px
iconSize: 16px
cursor: pointer

toggle-hover

backgroundColor: {colors.surface-muted}
textColor: {colors.ink}

toggle-active

backgroundColor: {colors.surface-pressed}

toggle-pressed

backgroundColor: {colors.surface-muted}
textColor: {colors.ink}

toggle-pressed-hover

backgroundColor: {colors.surface-pressed}

toggle-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

toggle-disabled

textColor: {colors.disabled-text}
cursor: not-allowed

Build with the skill

No package to install — hand this to your AI to generate the toggle in your stack.

Prompt for your AI

Implement the Zetta "Toggle" component in this project's stack using the zetta-design-md skill.

- Apply the `toggle` spec from the skill (variants: off, pressed, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

32px tall, min-width 32px, base radius, 16px icon; off is transparent with muted text, on holds surface-muted with ink text. Hover and active deepen toward surface-pressed.
A toggle is for a binary on/off control. For mutually-exclusive choices use a radio group or a single-select; for an immediate setting, use a Switch.

Accessibility

Use a <button> with aria-pressed reflecting state; label icon-only toggles. In a group, expose it as a toolbar with arrow-key roving focus.