Github

Badge

Badges highlight status, labels, or counts in a compact visual format.

Component variations

Variant

Contains: Solid, Subtle, Solid is default

Badge Badge

Size

Contains: Small as sm, medium as md, large as lg. Medium is default

Badge Badge

Colors

Contains: Primary, Neutral, Error, Success, Info, Warning. Primary is default

Badge Badge Badge Badge Badge Badge

Roundness

Is a boolean value. True makes the badge fully rounded. Otherwise the default roundness will be applied.

Button Button

Usage Guidelines

Import

Import the badge component in your module or component:

import-badge.ts

Copy code

Basic Implementation

Here is a basic example of using the badge component:

badge-example.html

Copy code

Implementation with all available APIs

Here is an example of using the badge component with all available APIs:

badge-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
Yes
Text displayed inside the badge
variant
'solid' | 'subtle'
'solid'
No
Visual style of the badge
color
'primary' | 'neutral' | 'error' | 'success' | 'info' | 'warning'
'primary'
No
Color token for the badge
size
'sm' | 'md'
'md'
No
Size of the badge
rounded
boolean
false
No
Whether the badge has fully rounded corners

Best Practices

When to Use

  • Use Badge when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Badge when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use concise labels to keep badges readable
  • Choose subtle variant for secondary emphasis; solid for primary emphasis
  • Prefer neutral color for generic counts; use semantic colors for status
  • Avoid mixing too many badge sizes in the same view
  • Use rounded when pairing with pills or tag-like UI
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Badge

example.html

Copy code