Skip to main content

Tags

Labels, Tags, or Badges are all types of classification component that help to categorize, organize, and label elements. Tags are used to call attention to new or updated content.

Do's

  • use them to draw attention to new, important content. Tags can focus attention on important content on that might otherwise be missed
  • when needed to filter results with one or more tags
  • to indicate the number of new or unread items within a container. For example, to indicate the number of unread emails within a person’s inbox

Don'ts

  • if your tags aren’t interactive, disable hover, focus, and active styles
  • don’t mix interactive and static tags
  • don’t overdo it. If everything on a page is called out as important, nothing commands unique attention.