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.
|Progressing||Progressing||Items that are currently processing||Active; In progress|
|Default||Default||Use for generic status or state||Information; Help; Modified|
|Declined||Declined||Items that have been blocked||Blocked; Declined; Errors; Failed|
|Expired||Expired||Items that are unavailable||Inactive; Expired; Disabled|
|New||New||Items that are newly created||New; Added|
Tags are used to label UI objects for quick recognition and navigation.
|Active Hover||Active Hover|