Badge is a label that indicates status or importance. Badges should provide quick recognition.

Update your pronouns in your profile settings
New

Props

Component props
Name
Type
Default
text
Required
string
-

Text displayed inside of the Badge. Sentence case is preferred.

position
"middle" | "top"
"middle"

Badge position relative to its parent element. See the positioning variant to learn more.

type
"info" | "error" | "warning" | "success" | "neutral" | "darkWash" | "lightWash"
"info"

Determines the style of the badge. See the type variant to learn more.

Usage guidelines

When to use
  • Labeling and bringing awareness to a specific element or feature (e.g., something is new or required).
When not to use
  • Providing feedback at the element level (e.g., displaying error messages). Use inline text instead.
  • Requiring interaction from users since Badges are always static and non-interactive.

Best practices

Ads & Campaigns
Beta
Ads & Campaigns
Beta
Do

Align the badge to the top of large accompanying text (anything larger than 16px). Center align for standard size text.

Active
Don't

Use colored badges over media. Instead use the dark or light wash.

Badge color patterns
Post title
Status
Handmade ceramics
Posted
Lunch ideas
Cancelled
Tattoo inspo
Archived
Do

Use established color patterns so users can quickly scan and identify sentiment. However, the badge text should always clearly indicate the sentiment, so color is not the sole indicator of information.

7 wardrobe trends
Fresh off the press
Don't

Use complex or verbose language. Instead use a single, scannable word. For example: 'New'.

Accessibility

The badge text is read out by assistive technologies like screen readers so all users can access the meaning of the badge in context. Text should demonstrate the sentiment clearly enough to be understood immediately without relying on color alone.

Localization

Be sure to localize the text prop. Note that localization can lengthen text by 20 to 30 percent.

Variants

Type

Badge is available in five styles. Each type represents a messaging sentiment.

  1. Info (default)
    Communicates helpful information or an important attribute. For example, 'New' or 'Help'.

  2. Success
    Indicates a constructive or successful state. For example, 'Available', 'Completed', 'Approved' or 'Added'.

  3. Warning
    Communicates cautionary or time-sensitive information to the user. For example, 'Busy', 'Missing' or 'Warning'.

  4. Error
    Informs the user of problems or errors that require potential action to correct. For example, 'Deleted' or 'Cancelled'.

  5. Neutral
    Indicates a general, non-critical status update. For example, 'Unavailable' or 'Not started'.

Type examples
Type
Example
Info
Ads & Campaigns
New
Success
Ads & Campaigns
Completed
Warning
Ads & Campaigns
Needs attention
Error
Ads & Campaigns
Failed
Neutral
Ads & Campaigns
Not started

Over media

Badge may be used over media using two wash styles.

  1. Over media - Light wash
    The light wash badge should be used over media that is dark or utilizes a dark gradient overlay.

  2. Over media - Dark wash
    The dark wash badge should be used over media that is light or utilizes a light gradient overlay.

Light wash
Dark wash

Positioning

By default, Badge is rendered inline within the parent element. However, the position prop can be used to adjust the alignment. Badges should align to the top of large accompanying text.

Ads & Campaigns
New
Ads & Campaigns
Beta

Within other components

Components like Module and Dropdown have Badges built into the component through props, so it will not be necessary to add the component yourself.

Title
Beta
This is example content.

Writing

Do
  • Use a single word to describe the status of an element. For example, “New” not “New post.”
  • Where applicable, describe the status in past tense. For example, “Archived” not “Archive.”
Don't
  • Use conflicting language with defined type sentiments. For example, the error badge should not say “Complete.”

Status
Status is a graphic indicator of an element’s state.

Tooltip
Tooltip is a floating text label that succinctly describes the function of an interactive element.