Feedback
Tag
Tag is a small, interactive element used to label, categorize or filter content. Tag allow users to quickly identify metadata and make selections.
Examples
BrandInfoSuccessWarningErrorNeutral
AccessibilityWCAG 2.1 Level AA Compliant
Features9 checks
- Minimum 3:1 color contrast ratio for non-text elements (WCAG 1.4.11)
- 4.5:1 color contrast ratio for text content (WCAG 1.4.3)
- Close button meets 24x24px minimum touch target (WCAG 2.5.5)
- Semantic HTML elements (span for static, button for interactive)
- aria-label attribute for screen reader identification
- aria-disabled attribute for disabled state
- Close button has descriptive aria-label with tag content
- Icons properly hidden from screen readers with aria-hidden
- Focus visible ring on close button for keyboard navigation (WCAG 2.4.7)
When to use this component
✓Do's
- •Categorization labels
- •Removable filter chips
- •Status or type indicators
- •Keyword or tag displays
✗Don'ts
- •For status indicators or notification counts, use a Badge.
- •For interactive actions, use a Button.
- •For page or section navigation, use links.
- •For longer descriptive content, use a more suitable layout or text component.
Do's and Don'ts
✓ Do's
PDF Verified
Use an X icon on removable tags, it is 60% more likely to be understood as removable.
✗ Don'ts
Income Certificate
Don't use tags for status indicators, use Badge instead.