Badge & Pill

Badge

A Badge is a label that indicates a defined status to the user. Badges are always static and non-interactive, and are not meant to be used to provide feedback or to display situational messages based on user input.

Use concise wording and try to limit the content to a single, scannable word.

Rules For Android

Github: Badge.kt
Use Badge or OutlineBadge
If the badge should be part of a cell, use - BadgeCell

Size

Badges are available in two sizes, Small & Large, to allow for more flexibility when paired with other elements in a Card or Cell.

Rules For Android

There is an interface BadgeStyle with two implementations: Default and Small
Eg. BadgeStyle.Small

Leading Icon

Badges support the optional rendering of an icon to the left of the label.

Styles

Badge is available in five styles. Each style is based on a semantic messaging sentiment.

Info or New
Communicates helpful information or that something is active. For example ‘New’ or ‘To Sign’

Error
Informs the user of problems or errors that require potential action to correct. For example, ‘Rejected’ or ‘Expired’.

Warning
Communicates cautionary or time-sensitive information to the user. For example, ‘Expires soon’

Success
Indicates a constructive or successful state. For example, ‘Done’, ‘Completed’

Default or State
Indicates a general, non-critical status that cannot be influenced by the user. For example, ‘In progress’ or ‘In assessment’.

Rules For Android

For coloring there is BadgeColorScheme with predefined colors
Eg. BadgeColorScheme.State or BadgeColorScheme.Error

Tokens

Style	Icon Token	Fill Token
Info	`color.state.info`	`color.state.info.weak`
Error	`color.state.negative`	`color.state.negative.weak`
Warning	`color.state.warning`	`color.state.warning.weak`
Success	`color.state.positive`	`color.state.positive.weak`
Default	`color.state.default`	`color.state.default.weak`

Pill

Similar to the Badge, a pill is a label that indicates a specific numeric value to the user.
Pills are always static and non-interactive, and are not meant to be used to provide feedback or to display situational messages based on user input.

Rules For Android

Use regular Badge with a number
Or BadgeCell when part of a cell

Tokens

Style	Value Token	Fill Token
Info	`color.state.info`	`color.state.info.weak`