Tag

The Tag represents resources and global terms to identify and linked with a text section to provide to the user more context and information regarding a topic. It usually appears in the top or bottom of the section and multiple tags can be concatenated to generate a series of resources displayed with a visual hierarchy that calls the user's attention.

Usage

  • Use the tag component to highlight properties of a section that want to remark.
  • Make consistent use of the component accross the application.
  • Be responsible of the use of background color and icons.
  • If there are multiple tags, the space between them should be at least 16px.

Icon usage

  • The tag can be displayed with icon and label or only icon.
  • The icon can be placed before or after.
  • The icon background color can be defined with the iconBgColor component property.