Actions · core

Toggle button

action.toggle-button

Toggle button: An action control that lets a person invoke or change an operation.

toggle buttonthe thing you clickthe action control

States5

Touch target44px

Evidence6

Introduced by4 kits

Visual specimen

Same contract. Every kit voice.

MAVAN renderingdefault

Translation table

What code calls it.

Web<button aria-pressed>The closest native or standardized web primitive.direct

ARIAbutton + aria-pressedThe primary accessibility role or state pattern.direct

SwiftUIToggleThe nearest named SwiftUI API.direct

AppKitNSButton(.pushOnPushOff)The nearest named AppKit API.direct

Anatomy

Every part, named.

1Interactive container
2Visible label or icon
3Action target
4State treatment
5Focus indicator

Often confused with

Similar shape. Different contract.

Buttonaction.button

Shares a visual family, but has a different role, state model, or interaction contract.

Link buttonaction.link-button

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Toggle button component (action.toggle-button). Toggle button: An action control that lets a person invoke or change an operation. Support these states: default, hover, focus-visible, active, disabled. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

default · hover · focus-visible · active · disabled

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion

Source union

jade · lumen · aurora · purple-rain