Skip to content
Telescope

BadgeNew: New

A static label that highlights an item's status.
Success: 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.

Information: InfoInformation: NeutralSuccess: PositiveError: NegativeWarning: WarningNew: Discover

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

Information: 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.).

Information: 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.).

Success: Approved

Negative

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

Error: Rejected

Warning

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

Warning: Overdue

Discover

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

New: 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.

Information: InfoInformation: NeutralSuccess: PositiveError: NegativeWarning: WarningNew: Discover

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.

Information: InfoInformation: NeutralSuccess: PositiveError: NegativeWarning: WarningNew: Discover

Skeleton

The skeleton property is used to display a loading state for the component while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Best practices

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

Accessibility

To satisfy WCAG 1.4.1 ("Color is not used as the only visual means of conveying information"), Badges have visually hidden prefixes applied before the content. These can be overridden using visuallyHiddenPrefix.

VariantPrefix
InfoInformation:
NeutralInformation:
PositiveSuccess:
NegativeError:
WarningWarning:
DiscoverNew:

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.