1. Components
  2. Badge

Components

Tailwind CSS Badge/Label/Chip

A visual indicator for a value or status descriptor for UI elements.

Solid color variants

The default form of solid color badges.

Badge Badge Badge Badge Badge Badge Badge

Soft color variants

Predefined soft color badge styles.

Badge Badge Badge Badge Badge Badge Badge

Outline color variants New

Predefined outline color badge styles.

Badge Badge Badge Badge Badge Badge Badge

White color variants New

Predefined white color badge styles.

Badge Badge

Rounded badges

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

Badge

Max width

Simple example with truncate.

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

This content is a little bit longer.

Badge with indicator

Use an indicator appearance to show indication.

Badge

Working with icons New

Use icon to show indication.

Connected
Attention
Loading
Disabled
14.5%
2%
37.3%
56%

Badge with remove button

Use badge with remove button.

Badge

Badge with avatar New

Use badge with avatar and remove button in combination.

Image Description
Christina
Image Description
Mark

With button

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

Positioned

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

Profile

Display a badge without a specific count.

Ping New

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.