components
Tailwind CSS Badge
Badges serve to communicate the status of particular data to the user.
The standard format for badge is component class badge, accompanied by modifier class badge-{semantic-color}.
Add modifier class badge-soft for soft colored badges.
Add modifier class badge-outline for outline 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.
This is the Default shape of the badge.
Add responsive class badge-{size} where {size} = xs|sm|default|lg|xl for badges of different sizes.
Use badges in anchor tags for clickable badge links.
Use badge with utility classes height(h), width(w) or size & p-0 for dot style badges.
Use svg or icons inside badges for icon badges.
Add utility classes size & p-0 for square icon badges.
Add utility classes rounded-full, size & p-0 for circular Icon badges.
Badges used in text inherit the font size of the immediate parent element.
Heading NEW
Heading NEW
Heading NEW
Heading NEW
Heading NEW
Add badges to buttons to display additional information in buttons.
Use the img tag to display avatar badges with an image.
John
Anna
SophiaDismissible 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
NewA simple example of dismissible avatar badges.
John
Anna
Sophia
