Canon Badges

CANON · Badges

Small metadata shapes. Badges, chips, pills, and tags are all adjacent concepts; the right name matters less than the right behavior.

What belongs in a badge

Badges are metadata. If users click a badge and something changes, they expected a button.

Badges vs chips vs tags

Most are the same visual shape (rounded rectangle) but different behavior. Don't make display-only badges look clickable — confuses users.

Sizing

Most UI badges are SM or MD. XS only for dense tables and inline markers.

Border radius: 4–6px for rectangular feel, 999px for pill. Stay consistent within a UI.

Color coding — status conventions

Users learn color semantics. Respect the conventions.

Color alone is never the only signal. Pair with the label text. WCAG 1.4.1.

Tonal badges (preferred)

Instead of saturated-fill badges (loud), use tonal:

• Light background (10–15% of the hue's lightness zone) +
• Dark text (60–70% of the hue's lightness zone).

.badge-success {
  background: oklch(95% 0.03 145);
  color: oklch(35% 0.10 145);
}

Tonal badges integrate into interfaces without screaming. Reserve saturated fills for genuine alerts.

Ensure 4.5:1 contrast between badge text and badge background.

Count badges

Inbox  3
Inbox  99+

• Show 1–99 as the exact number.
• Over 99 → "99+".
• 0 count → usually don't show the badge at all. An empty badge signals nothing.
• Position: trailing the label, not leading.
• If overlaid on an icon (notification on bell icon): top-right corner with slight offset.

Notification dot vs count

Dots are less informative but cleaner. Pick per context.

Notification badge on an icon

   🔔
   ●

• 8–10px dot for binary presence.
• Small numeric badge (14–16px) with value when count is meaningful.
• Top-right corner of the icon, offset 0–4px.
• Ring around the badge matching the background — separates from the icon.

.icon-badge::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--color-danger);
  border: 2px solid var(--surface-bg);
  border-radius: 50%;
}

Accessibility for notification badges

Visual-only badges are invisible to screen readers.

<button aria-label="Notifications (3 unread)">
  <svg aria-hidden="true">...</svg>
  <span class="badge" aria-hidden="true">3</span>
</button>

• aria-label on the button includes the count in words.
• aria-hidden on the visual badge to prevent double-announcement.
• Or use aria-live="polite" on the count element to announce changes as they happen.

Chip (interactive, removable)

┌─────────────────────┐
│  urgent     ✕       │
└─────────────────────┘

• Clickable region (whole chip selects, or toggles).
• Remove button inside (✕ icon).
• Clear hover, focus, and selected states.
• <button> semantics for the whole chip, or <button> for the X inside.
• Min hit target 44×44 on mobile (even if visual size is smaller, padding covers it).

Filter chips

[All] [Active] [Draft] [Archived]

• Horizontal row, scrollable on mobile.
• Selected chip visually distinct (filled vs outlined).
• Single-select or multi-select behavior should be obvious from the context.
• For multi-select: toggle on click, show count of selected if many.

Tag

• Usually categorical, lower-visibility than status badges.
• Multiple tags per item is common.
• Colors can be author-chosen (GitHub labels) or deterministic (hashed from tag name for consistency).
• Content is short — 1–3 words max.

Placement conventions

Be consistent across the app.

Truncation

Badge content stays short. If a tag or label genuinely can't fit, truncate with ellipsis and reveal full text on hover/focus. But usually the right answer is shorter labels.

Anti-patterns

Decision tree

Is this interactive?
  ├─ No → Badge
  └─ Yes → Chip

What does it represent?
  ├─ Status/state → Status badge, semantic color
  ├─ Category/tag → Tag, optional color
  ├─ Count → Count badge
  ├─ Binary presence → Notification dot
  └─ Selection in a filter → Filter chip

Is color the only signal?
  └─ Always pair with text or shape — never color-only

Audit checklist

• Text is short (1–3 words or a count)
• Color paired with text label (never color-only)
• Contrast ≥ 4.5:1 between badge text and background
• Tonal backgrounds used instead of saturated for passive states
• Count badges show "99+" above 99
• Zero counts hidden
• Notification badges on icons include count in aria-label
• Non-interactive badges don't look clickable
• Interactive chips have hover/focus/selected states
• Chip remove buttons have aria-label
• Placement consistent across the UI
• Mobile hit target ≥ 44px on interactive chips

Sources

• WCAG 2.2 · 1.4.1 Use of Color, 1.4.3 Contrast (Minimum), 4.1.3 Status Messages
• Material Design 3 · Chip, Badge
• Apple HIG · Badges, Tags
• GitHub Primer · Label / Badge guidance