Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Version: Canary 🚧

Change log

Components

Badge

Overview

When to use

Badges can be used to communicate status or count. Badges are read-only status indicators or labels and are not interactive.

  • Draw attention to new or unread notifications, such as messages or alerts.
  • Indicate the status of an item or task, such as "In progress" or "Complete".
  • Display the number of items in a particular category or section.

When not to use

Don't use badges excessively, as this can overwhelm the user and make the interface look cluttered. Don't use badges to draw attention to information that is not particularly important or relevant to the user.

Variants​

Text badge​

Text badges are used to communicate status or count.

Icons can be used in large and medium badges.

Dot badge​

Dot badges are used adjacent to text or on top of an icon to indicate status.

Size​

Text badges come in four different sizes: large, medium, small and x-small.

Dot badges are available in two sizes: large and small. Recommended usage: large when adjacent to text, small when on top of an icon.

Labels​

Label can be either a number or text. Keep text labels as short as possible, preferably one word only.

Semantic vs non-semantic​

Badges can be used to indicate semantic meaning.

Colors can be also used as a decoration, without any semantic meaning. Use of yellow and red color is not recommended in this case, as users may perceive it as a warning or an error.