Badge

A badge is a component that represents the type of record registered in the system. Badges are a non-interactive way to visually identify and distinguish a specific type of record within a system.

Status

Status

Healthy

Figma component

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

Principles

Use when

  1. distinguish the type or category of a record.
  2. display a thumbnail for this type of record in lists.
  3. represent a user within the product.
  4. displaying the user credentials on the layout.

Don't use when

  1. Badges should not be used in repetitive lists with the same type of record.

Structure

badge-structure
  1. Background: The background itself always stands out from the foreground.
  2. Foreground: The foreground includes icons, entities, and images.

Properties

Types

Icon

The Icon badge is used when an icon/indicator is needed to describe the type of a record.

Letter

Letter badges are badges that we position the first letters of a maximum of three words for record types that do not have an icon, or image assigned to them.

Image

The badge with an image foreground is used when an image is added for a record or for a user, and when the entry's content needs to be displayed as a thumbnail in other areas where the record appears.

Size

Default

The default badge is intended for records that are listed in structured lists.

Large

The large badge is for representing record type in result views and form pages.

Attribute

Background circle (boolean)

It is used when a badge is wanted to be used as an avatar for displaying the user’s credentials.

Positioning

Square badges appear in structured lists, result views, and forms, to the left of the record's label within those structured lists. Circle badges are to be used solely for displaying user credentials or representing user-related identity.