1. Components
  2. Badge

Components

Tailwind CSS Badge, Label, Chip

Browse Tailwind badges (often referred to as labels or chips) - small rounded or pilled tags, status/category indicators or a visual cue. May come with avatar or counter, be removable or animated.

Color variants

Solid color variants

The default form of solid color badges.

Theme:

Soft color variants

Predefined soft color badge styles.

Theme:

Outline color variants

Predefined outline color badge styles.

Theme:

White color variants

Predefined white color badge styles.

Theme:

Shape

Rounded badges

Use the border radius utility classes to make avatars more rounded.

Theme:

Max width

Simple example with truncate.

Avoid truncation wherever possible by using shorter text in badges. The truncated text is not focusable or accessible.

Theme:

Badge with indicator

Use an indicator appearance to show indication.

Theme:

Working with icons

Use icon to show indication.

Theme:

Badge with remove button

Use badge with remove button.

Theme:

Badge with avatar

Use badge with avatar and remove button in combination.

Theme:

With button

Badges can be used as part of links or buttons to provide a counter.

Theme:

Positioned

Position a badge in the corner of a link, button, avatar or any other component.

Theme:

Profile

Display a badge without a specific count.

Theme:

Animation

Ping

Add the animate-ping utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

Theme: