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.

warning
This component will be removed from Halstack Design System in the next major release. Please start considering alternatives such as the Badge, the Button or the Chipcomponents.

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.