## Badge
A small count or status marker — notification counts, unread dots, a standalone status label.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-badge> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- count: number, default 0. The number shown in the bubble; 0 hides it unless showZero
- overflowCount: number, default 99. Cap; above it renders as N+ (alias: max)
- showZero: boolean, default false. Keep the bubble visible when count is 0
- dot: boolean, default false. Render a bare marker, no number
- status: success | processing | error | warning | default | primary, default error. Semantic colour; with `text` (no count/dot) renders a standalone dot + label
- text: string, default —. Label for a standalone status badge
- color: CSS colour, default —. Custom colour overriding the semantic default
- ribbon: boolean, default false. Wrap the slotted child (a card) with a corner ribbon banner; `text` is the label, colour from color/status (default primary)
- placement: start | end, default end. Ribbon corner: end = top-right (default), start = top-left
- tone: danger | success | positive | essential | pro | branding | primary-alt, default —. Filled/tinted LABEL chip; each tone binds bg + fg to an --aha-* token
- plan: free | edu | essential | pro | enterprise, default —. Plan preset chip (solid brand fill); pro/enterprise lead with a crown glyph
- cycle: monthly | yearly, default —. Appended to a plan chip's default label (e.g. "Pro · Yearly")
- rank: 1 | 2 | 3 | 4, default —. Leaderboard rank chip; medal-tinted (gold/silver/bronze) with a leading system-Medal glyph
- session: string, default —. Renders a "Session N" chip; the value is N (slotted content / `text` overrides the label)
- href: URL, default —. Makes a tone/plan/rank/session chip a clickable LINK — renders <a class="chip" href> (native focusable, animates on hover), never a <button>. Omit for a static <span> chip
Tokens: color-error, color-success, color-warning, color-primary, text-tertiary, text-inverse, text-default, bg-container, radius-pill, radius-xs, bg-accent, bg-positive, bg-negative, text-positive, text-negative, coral-10, coral-60, coral-70, coral-80, coral-20, pink-10, pink-70, purple-15, purple-55, gray-30, gray-20, yellow-30, yellow-90, bg-dark, text-secondary, border-focus, motion-mid, ease-in-out.
Use when: Badge count/dot (a count or presence marker attached to another element (a bell, a tab, an avatar)); Badge status (a standalone semantic state label (Published, Generating, Failed) in a list or header); Tag (a standalone label/keyword chip with text but no status semantics).