Halstack

Design System

v9.1.0

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.

Contents

Usage
Icon usage

Edit this page on GitHub

Previous