Tag semantic

Tag-semantic can be used to represent objects as a visual label on list items, table rows, and individual type of records.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Principles

Use when

  1. to display and filter items or content based on category or status.
  2. mapping multiple contents or distinguishing between different items/records.

Don't use when

  1. listing an item over on input or overflow menu.

Structure

Default tag-semantic (above), tag-semantic with icon (below)

Default tag-semantic (above), tag-semantic with icon (below)

  1. Container
  2. Tag label
  3. Icon

Properties

Status

Success

It can be used in any message where the success of an action or record is desired to be conveyed.

Pending

It can be used when the record desired to convey that a process is in a pending state etc.

Error

Its preferred use is when a record encounters an error as a result of any action.

Information

This variant preferred when the context is likely to be more informational.

Attribute

Background (boolean)

The background is needed when the tag needs to be separated visually from the nested component (e.g table or structered list).

Icon (boolean)

An icon can be used to convey the message and clarify the statuses data or records.

Positioning

Semantic tags should be placed in cards, structured list's and table row's cells.