Solaris Design System

Badges

Badges are used to display numerical information in a small area space. They are also used for notifications but note that badges can be nofications but notifications are not badges.

States of badges

There are four states of badges:

Passive: this doesn’t require a users’ full attention.

Warning: requires a users attention, and that they should know there is a warning to the following outcome or interaction.

Alert: somewhat requires a users attention, this badge means that the user can continue what they are doing but they should recognise the risks.

Notification: optional in regards to grabbing the users’ attention, this badge informs the user about something non-urgent.

States Single character
Size: 25px		 Double character
Size: H 24px, W 32px		 Special character
Size: H 24px, W 48px
:passive Passive single badges theme light Passive single badges theme dark Passive double badges theme light Passive double badges theme dark Passive special badges theme light Passive special badges theme dark
:warning Warning single badges Warning double badges Warning special badges
:alert Alert single badges Alert double badges Alert special badges
:new New single badges New double badges New special badges
:notification Notification single badges Notification double badges Notification special badges

Usage

Badges are used to display numerical information in a small area space.

They can be used for notifications but note that notifications are not badges.

When to use

Displaying information in a confined space to represent something in a numerical value.

And example of this is Codebots platform on the entity diagram, there is a section that shows number of users on the appliction plus 3 more - that’s a badge the +3.