Badge

🧭 When to Use a Badge

Use a Badge when:

• You want to indicate state or status (e.g., success, warning, error)

• You need to show a number (e.g., unread messages, notifications)

• You want to highlight something new or active without using full labels

Avoid using Badges for critical alerts or destructive actions—use an Alert or Modal in those cases.

🎨 Types

• Default – Neutral tone; used for generic status or tags

• Outline – Minimal version with a border and transparent background

• Error – Signals a problem, failure, or critical issue

• Success – Indicates a positive state or completion

• Information – Used for notes, tips, or non-blocking details

• Warning – Shows caution or a soft alert

Each type is color-token driven and works across both light and dark themes.

🎯 States

• Default – The base, idle state

• Filled – Applies a solid background for more emphasis (available for all types above)

Toggle between states using component variants in Figma to match UI density or importance.

📏 Sizes

• Extra Small (xsm) – Best for subtle status or icon overlays

• Small (sm) – Great for dense UI and mobile layouts

• Medium (md) – Default size, used in most design contexts

• Large (lg) – High-visibility use in cards, feature areas, or dashboards

All sizes scale type, padding, and corner radius consistently using system tokens.

🧩 Modifiers

Modifiers change the content or visual treatment of the Badge. You can toggle these in Figma using layer properties or variant settings:

• Text – Displays a short label (e.g., "New", "Beta")

• Number – Shows a count or metric (e.g., "12", "99+")

• Dot – A small visual cue for presence or attention, no text

• Close – Adds a dismiss icon (e.g., “x”), useful for tag-style badges

• Active – A subtle pulsing or emphasized style for real-time activity or live states

Modifiers can be paired with types and sizes for full flexibility.

♿ Accessibility Considerations

From a design perspective:

• Use sufficient contrast for text within the badge

• Don’t rely on color alone to communicate state—combine with icons or text when needed

• Ensure badges are visually distinguishable from nearby content

From a code perspective (if implemented):

• Use semantic <span> or <div> with appropriate roles if the badge has a function

• For dismissible (close) badges, use aria-label and keyboard accessibility

• For number badges on icons (e.g., notifications), use aria-label like “5 unread notifications”

✅ Best Practices

• Keep text content concise—no more than 1–2 words or 3-digit numbers

• Use number or dot modifiers on icons, not text-heavy components

• Combine badges with icons for compact yet informative patterns

• For dismissible tags, use the close modifier only when interaction is expected