Selection & identity · core

Avatar chip

selection.avatar-chip

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

avatar chipthe small selectable labelthe status marker

States5

Touch target44px

Evidence6

Introduced by1 kits

Visual specimen

Same contract. Every kit voice.

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

SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation

AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation

Anatomy

Every part, named.

1Container
2Identity or selection content
3Selected or status treatment
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.

Filter chipselection.filter-chip

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

Removable chipselection.removable-chip

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 Avatar chip component (selection.avatar-chip). Avatar chip: 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

jade