Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

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

Use solid fills for high-emphasis badges, labels, and chips.

Soft color variants

Use softer fills for lower-contrast badge styles.

Outline color variants

Use outlined styles when you want lighter visual emphasis.

White color variants

Use white-filled badges with subtle borders for a clean, neutral style.

Shape

Rounded badges

Use border-radius utilities to give badges softer corners or pill-shaped edges.

Truncated badge

Use truncate when a badge has to fit within a fixed width.

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

Badge with status dot

Add a small dot to reinforce the badge state at a glance.

Badges with icons

Pair icons with badge text for states, metrics, or trend changes.

Dismissible badge

Add a dismiss action when users need to remove a badge or chip.

Badge with avatar

Combine an avatar, label, and optional dismiss action in a single chip.

Badge inside button

Place a badge inside a button or link to show counts like notifications.

Positioned badge

Anchor a badge to the corner of another element, such as an icon button or avatar.

Dot badge

Use a small dot badge when you need a notification state without a numeric 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.

© 2026 Preline Labs.