Return to Sky UI homepage
Tag

Overview

View on FigmaView on GitHub

Purpose

The Tag component shows a status or a category. It can use colours and icons to enhance the tone of the message. Tags are not interactive.

Anatomy

The Tag component can be broken down into the following elements -

  1. 1
  2. 2
  3. 3

  1. Container

    The container provides a background wrapper for the label.

  2. Label

    The label describes the status of category of the Tag.

  3. Icon (optional)

    An optional icon to illustrate the text.

Variants & States

  • Purpose: Neutral, Positive, Negative
  • Icon: on/off
Neutral
Positive
Negative