Φ 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.)

Styleguide Link

• Parent: Multiple... Badge - Usecase, Icon, Label, AdaptIcon, Avatar, Button, Tab 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.