Tailwind CSS Badge, Label, Chip

Color variants

Soft color variants

Predefined soft color badge styles.

Outline color variants

Predefined outline color badge styles.

White color variants

Predefined white color badge styles.

Shape

Max width

Simple example with truncate.

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

Badge with indicator

Use an indicator appearance to show indication.

Working with icons

Use icon to show indication.

Badge with remove button

Use badge with remove button.

Badge with avatar

Use badge with avatar and remove button in combination.

Copy

Copy to clipboard with dark: classes

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