1. Components
  2. Badge

Components

Tailwind CSS Badge

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

Color variants

Solid color variants

The default form of solid color badges.

Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

Soft color variants

The default form of soft color badges.

Badge Badge Badge Badge Badge Badge Badge 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

Badge with remove button

Use badge with remove button.

Badge

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.