Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
Tailwind CSS Badge, Label, Chip | Free Preline UI Components
[go: Go Back, main page]
  1. Components
  2. Badge

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.

Theme:

Soft color variants

Predefined soft color badge styles.

Theme:

Outline color variants

Predefined outline color badge styles.

Theme:

White color variants

Predefined white color badge styles.

Theme:

Shape

Rounded badges

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

Theme:

Max width

Simple example with truncate.

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

Theme:

Badge with indicator

Use an indicator appearance to show indication.

Theme:

Working with icons

Use icon to show indication.

Theme:

Badge with remove button

Use badge with remove button.

Theme:

Badge with avatar

Use badge with avatar and remove button in combination.

Theme:

With button

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

Theme:

Positioned

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

Theme:

Profile

Display a badge without a specific count.

Theme:

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.

Theme: