Badge

Badges are used to inform merchants of the tone of an object or of an action that's been taken.

Complete

Color

Brand Color

Label

Success

Label

Secondary Purple

Label

Information

Label

Danger

Label

Warning

Label

Gray

Label

Magenta

Label

Teal

Label

Type

Tonal

Label

Default

Label

Best practices

Using established color patterns so that users can quickly identify their tone or importance level
Being clearly labeled with short, scannable text
Being positioned to clearly identify the object they're informing or labelling

Size

Md

Label

Sm

Label

Lg

Label

Left Icon

True

Label

False

Label

Do

Badge labels should:

Use a single word to describe the tone of an object.
Only use two words if you need to describe a complex state. For example, "Partially refunded" and "Partially fulfilled".
Always describe the tone in the past tense. For example, refunded not refund.

Right Icon

True

Label

False

Label

Don't

Don't use alternatives to existing badge options. Only create a new badge option if there aren't any existing options to communicate the tone you need.