Φ Badge
Primitive: The possible styles and sizes of a badge are set here. A badge can be attached to many objects, icons, adaptIcons, Avatars, Labels (like within a button, app bar, tabs etc.)
Properties
Type
Value - The use of a number to indicate the amount of actionable activities attached to the object. Note, the font used here is an exception in the design system and is set to a font-size of 8.
Color - The association of a color to a status. IE. Red=Away, Green=Available
Size
Medium (12dp)
Small (6dp)
State
Enabled
Disabled
Usage
A badge is an onscreen object linked to a notification/alert. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another element or component. A badge is both a notifier that there are items associated with an object and an indicator of how many items there are.
A badge is used to draw the user's attention to an object, or to emphasize that something may need their attention. For example:
A "New messages" notification might be followed by a badge containing the number of unread messages.
A "Shopping cart" badge showing the number of items in the cart.
A "Status" badge on an Avatar might have an accompanying badge to indicate the users activity status at that moment.
A badge signifies that with a tap of the object tied to the badge, additional information indicated by the badge is accessible. Badges are a common feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.
Last updated