Badge

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

1. Background: The background itself always stands out from the foreground.
2. Foreground: The foreground includes icons, initials (or entities), and images.

Properties

Types

Icon

The icon badge is used when an icon/indicator is needed to describe the type of a record. It’s only used for rounded badges.

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.

Shape

Rounded

Rounded shaped badges represent company, inventory stock, e-invoice types, generally any record type on the screen.

Circle

Circle is can be used only as an avatar, for displaying the user’s credentials.

Positioning

Rounded 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.

Figma source