Skip to content
Telescope

BadgeNew

A static label that highlights an item's status.
Approved

Features

  • Supports various statuses
  • Can optionally display an icon next to the label
  • Features a "loud" variant that stands out more

When to use

To highlight an item's category or attribute, use a Tag instead.

Examples

Variants

The component comes in different variants. Each variant is used to signal a different status.

InfoNeutralPositiveNegativeWarningDiscover

Info

Use the info variant to highlight something that's neither good or bad. This is similar to the neutral variant. However, it should be used for active statuses (e.g., in progress, processing, etc.).

In progress

Neutral

Use the neutral variant to highlight something that's neither good or bad. This is similar to the info variant. However, it should be used for inactive statuses (e.g., archived, paused, draft, etc.).

Off

Positive

Use the positive variant to highlight something that's good, from the user's perspective, or something enabled (e.g., approved, active, on, enabled, etc.).

Approved

Negative

Use the negative variant to highlight something that's bad, from the user's perspective.

Rejected

Warning

Use the warning variant to highlight something that requires the user's attention.

Overdue

Discover

Use the discover variant to highlight new features or functionality users might not be aware of.

New

Loud

Use the loud prop when you need to make a badge stand out more. This variant is also intended for use on gray backgrounds.

InfoNeutralPositiveNegativeWarningDiscover

Icons

An icon can be added next to the label. This can help users understand a badge's meaning. Icons can also make badges more recognisable and distinguishable. This is helpful in scenarios where multiple badges are used on a page or within a list.

InfoNeutralPositiveNegativeWarningDiscover

Best practices

Rejected
Admin
Do
Use to highlight an item's status.
Don't
Use to highlight an item's category or attribute. Use a Tag instead.
Approved
This expense has been approved
Do
Use short, descriptive labels.
Don't
Use long labels.
Missing receipt
Receipt
Do
Make sure the label communicates the badge's meaning.
Don't
Rely on color alone to communicate meaning.
In progress
In progress
Do
Add an icon to support the badge's meaning.
Don't
Add an icon for purely aesthetic reasons.

Related components

  • Callout: Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
  • Count: A static label that indicates the quantity of items.
  • Tag: A static label that highlights an item's category or attribute.