Studio
Studio/Kits
New kit
Canonical inventory
Selection & identity · core

Badge

selection.badge

Badge: A compact identity or selection element that communicates choice, category, or status.

badgethe small selectable labelthe status marker
States5
Touch target44px
Evidence6
Introduced by8 kits
Visual specimen

Same contract. Every kit voice.

Badge
MAVAN renderingdefault
Translation table

What code calls it.

Webbutton or status patternThis component is composed from multiple web primitives.pattern
ARIAoption or statusNo single ARIA role represents the complete component.pattern
SwiftUI.badgeThe nearest named SwiftUI API.direct
AppKitNSDockTile.badgeLabel patternThe nearest named AppKit API.direct
Anatomy

Every part, named.

  1. 1Container
  2. 2Identity or selection content
  3. 3Selected or status treatment
  4. 4Optional remove or disclosure action
Often confused with

Similar shape. Different contract.

Chipselection.chip

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

Status pillselection.status-pill

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

Category tagselection.category-tag

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 Badge component (selection.badge). Badge: A compact identity or selection element that communicates choice, category, or status. 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

mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin