Badges

  1. Components
  2. Badges

Solid badges

Theme colors for concise labels.

PrimarySecondarySuccessDangerWarningInfoLightDark

Soft badges

Subtle backgrounds for supporting information.

PrimarySecondarySuccessDangerWarningInfoLightDark

Pill badges

Rounded labels for statuses and categories.

PrimarySecondarySuccessDangerWarningInfoLightDark

Outlined badges

Minimal labels with colored borders.

PrimarySecondarySuccessDangerWarningInfoLightDark

Badges with icons

Add context with the existing icon system.

VerifiedPendingFeaturedOverdueSecure

Notification counts

Attach counts to common actions.

Heading labels

Pair a label with a section title.

Product updates New

Workspace analytics Beta

Team directory 24 members

Removable tags

Remove selected labels with an accessible control.

DesignDevelopmentResearchPlanning

Status labels

Consistent states for records and workflows.

  • Invoice INV-0148Pending
  • Workspace onboardingIn progress
  • File uploadCompleted
  • Support requestClosed

Profile labels

Use badges beside names and roles.

Liam CarterActive
Senior Product Manager
ProductTeam lead

Clickable categories

Link labels to related workspace pages.

People Files Invoices

Label sizes

Use typography and spacing utilities for scale.

SmallDefaultLarge