Badges

Badges are a small visual interaction with the user that aims to inform them of something, without using more than a colored dot. It should not be larger than 16 by 16 pixels. Optionally one can display a number but only in Notifier Badges, and text but only on Notifier and Modifier Badges.

There are three types:

1. Notifier Badge

   This type of badge notifies the user that something happened elsewhere in the app. When it contains numbers, it's not fully rounded but instead has 8px of radius and the css class .badge-info. Use it sparingly.

2. Modifier Badge

   This type of badge shows the status of something, like for example a modified file in a project. May also be used to inform the user of a textual information. When it has information, it's not fully rounded but instead has 8px of radius and the css class .badge-info.

3. Classifier Badge

   This type of badge displays the availability of someone or something. Pairs well with account widgets.