## Tag
A small label chip for a category, keyword, or state — filled or bordered, with an icon, a dismiss ×, or a checkable toggle.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-tag> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- color: neutral | primary | success | processing | warning | error, default neutral. Semantic tone preset (alias: `variant`)
- bordered: boolean, default false. Outlined shape — white surface + a coloured 1px hairline instead of the filled tint
- icon: string, default —. Leading DS icon name, e.g. system-tag (resolved via <aha-icon>)
- closable: boolean, default false. Shows a dismiss × that animates out, removes the tag, and emits close
- checkable: boolean, default false. Renders a selectable toggle chip (button, aria-pressed)
- checked: boolean, default false. Selected state of a checkable tag (brand fill)
- close: CustomEvent, default —. Composed event when the × is pressed
- change: CustomEvent, default —. Composed event on a checkable toggle, detail { checked }
Tokens: gray-30, text-secondary, bg-container, border, purple-10, purple-60, text-inverse, bg-positive, text-positive, border-success, bg-informative, text-link, border-info, bg-warning, text-warning, border-warning, bg-negative, text-negative, border-error, border-focus, radius-xs.
Use when: Tag (labelling content with a category/keyword, or showing a non-urgent state inline); Badge (a count or a status dot attached to another element); Button (the chip should trigger an action — a Tag is a label, not a control).