Component

Tag

Published on

Description

The Tag component renders a keyword or label as a link. Tags are commonly used for categorization, filtering, or tagging content with metadata.

Use tags when content can be categorized or filtered by keyword. For non-interactive labels or counts, use a Badge instead.

Example

Open in new tab
View HTML markup 
  <ul>
  <li><a rel="tag" href="#">HTML </a></li>
  <li><a rel="tag" href="#">CSS </a></li>
  <li><a rel="tag" href="#">JavaScript </a></li>
</ul>
<p>or</p>
<footer>
  <p>Categorized under: <a rel="tag" href="#">HTML </a>, <a rel="tag" href="#">CSS </a>, <a rel="tag" href="#">JavaScript </a></p>
</footer>

Accessibility

  • Tags are rendered as <a> elements, making them focusable and navigable by keyboard.
  • Screen readers announce tags as links, with the tag text as the accessible name.
  • Tags receive focus styles and can be activated with Enter or Space.

References

  • Badge — for non-interactive status indicators and counts
  • Links — for general-purpose navigation

Variables

None