Badges & tags

Badges & Tags guideline is updated on 22 Aug 2018


A badge or a tag is used to highlight an element, show progress or as a placeholder. We created two styles (subtle and bold) to support UI elements in various scenarios. We follow the Color usage guide when creating these labels to practice a consistent visual language.

Subtle badge sample
Bold badge sample


Tags are used to label UI objects for quick recognition and navigation.

States Description
Empty Empty (Idle)
Hover Hover
Editing Editing
Active Active
Active Hover Active Hover
Tag sample