Tag

🧭 When to Use a Tag

Use a Tag when:

• You need to show categorical or status-based information

• Users don’t need to interact with the label — it’s purely visual

• You’re labeling cards, files, statuses, filters, or user attributes

Avoid using static Tags when interaction is expected — use Interactive Tags instead.

🎨 Types

• Default – Neutral tag for general labeling

• Badge – Styled like a pill or count badge; visually compact and minimal

• Status – Uses semantic colors (e.g., success, warning, error) to indicate system or item state

Each type is token-driven and aligns with your color system for dark/light themes.

📏 Sizes

• Default – Core size used in most UIs

• Medium (md) – Slightly larger, ideal for featured cards or dashboards

• Large (lg) – High-visibility tag for summaries, category labels, or hero-level content

Size affects padding, font size, and spacing relative to adjacent elements.

🎯 States

• Subtle – Low-contrast background; ideal for minimal UI or tags nested in text

• Default – Balanced contrast; works well as a primary label

• Filled – High-emphasis tag with full background fill; often used for status or state indicators

Each state helps you visually control hierarchy and emphasis. Switch via component variant toggles in Figma.

♿ Accessibility Considerations

From a design perspective:

• Ensure text contrast meets WCAG 2.1 color requirements

• Use consistent sizing and spacing between Tags to support readability

• If multiple Tags are used together, group them clearly and allow visual separation

From a code perspective (if implemented):

• Tags should be rendered using semantic <span> or <div>

• If status is being communicated (e.g., "Offline", "Warning"), also surface that through text — not color alone

• Use aria-hidden="true" for purely decorative Tags if applicable

✅ Best Practices

• Use Tags for static metadata only — don’t overload them with actions or icons

• Keep tag content short and scannable (1–2 words)

• Use subtle state in dense UIs or inside text blocks

• Use filled or status variants when visual attention or state clarity is needed

• Avoid mixing too many styles within a single set of Tags unless conveying meaning (e.g., status vs. type)