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.

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

Predefined outline color badge styles.

Badge Badge Badge Badge Badge Badge Badge

White color variants

Predefined white color badge styles.

Badge Badge

Shape

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

Use icon to show indication.

Connected

Attention

Disabled

14.5%

37.3%

56%

Badge with remove button

Use badge with remove button.

Badge

Badge with avatar

Use badge with avatar and remove button in combination.

Christina

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.

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.