• components
  • Badge

components

Tailwind CSS Badge

Badges serve to communicate the status of particular data to the user.

Class Name
Type
Description
badgeComponentBase class for the badge component.
badge-softStyleSoft colored badge.
badge-outlineStyleTransparent badge with colored border.
badge-primaryColorBadge with ‘primary’ color.
badge-secondaryColorBadge with ‘secondary’ color.
badge-accentColorBadge with ‘accent’ color.
badge-infoColorBadge with ‘info’ color.
badge-successColorBadge with ‘success’ color.
badge-warningColorBadge with ‘warning’ color.
badge-errorColorBadge with ’error’ color.
badge-xsSizeBadge with extra small size.
badge-smSizeBadge with small size.
badge-mdSizeBadge with medium(default) size.
badge-lgSizeBadge with large size.
badge-xlSizeBadge with extra-large size.

Variants

Solid badges

The standard format for badge is component class badge, accompanied by modifier class badge-{semantic-color}.

Soft badges

Add modifier class badge-soft for soft colored badges.

Outline badges

Add modifier class badge-outline for outline badges.

Shapes

Pill badges

Use the rounded-full utility class to make badges pilled. The default shape of the badges but can be altered by using TailwindCSS Border Radius utility classes.

Rounded badges

This is the Default shape of the badge.

Sizes

Size variants

Add responsive class badge-{size} where {size} = xs|sm|md|lg|xl for badges of different sizes.

Illustrations

Badge links

Use badges in anchor tags for clickable badge links.

Dot style badges

Use badge with utility classes height(h), width(w) or size & p-0 for dot style badges.

Dashed badges

You can achieve this style by combining the border-dashed utility class with the badge-outline modifier class.

Badge with icons

Use svg or icons inside badges for icon badges.

Icon badges (rounded)

Add utility classes size & p-0 for square icon badges.

Icon badges (circular)

Add utility classes rounded-full, size & p-0 for circular Icon badges.

Badge in a text

Badges used in text inherit the font size of the immediate parent element.

Badge in a button

Add badges to buttons to display additional information in buttons.

Avatar badges

Use the img tag to display avatar badges with an image.

Required FlyonUI JS

Dismissible badges

Default chips

Dismissible badges are also referred as chips.

Include the data-remove-element attribute in the close button element and set its value to #id to specify the element to be removed. Customize the removal animation by incorporating the removing: modifier, as illustrated below.

Avatar chips

A simple example of dismissible avatar badges.