Badges

Tailwinds CSS Badges crafted by TailGrids, badges are widely used to provide important signal on UI in tiny simple area. Tailwind CSS badges are expertly crafte ...

Danger Badge VariationsFree

A versatile set of badge components in various styles, including filled, outlined, rounded corner, and pill-shaped variations. Designed with a distinct red color to convey a sense of warning or urgency.

Dark Badge VariationsFree

A set of dark-themed badge components ideal for providing subtle emphasis or labelling. Includes filled, outlined, rounded corners and pill-shaped variations.

Gray Badge VariationsFree

A set of gray-themed badge components that offer flexibility in style and customization. Includes filled, outlined, rounded corner, and pill-shaped variations, all with a neutral gray color palette.

Info Badge VariationsFree

A set of info badge components in various styles, including filled, outlined, rounded corner, and pill-shaped variations. All badges are designed with a distinct blue color to convey information.

Light Badge VariationsFree

A set of versatile badge components in various styles, including filled, outlined, rounded corner, and pill-shaped variations. Designed with a light color palette for subtle notifications and labels.

Primary Badge VariationsFree

A versatile set of badge components in various styles, including filled, outlined, and rounded corner variations. Designed with the theme's primary color for visual emphasis and prominence.

Secondary Badge VariationsFree

A set of versatile badge components in various styles, including filled, outlined, and rounded corner variations. Designed with your theme's secondary color for visual accent and highlighting.

Success Badge VariationsFree

All badges are designed with a distinct green color to convey success or positive status. Customize background opacity and roundedness to fit your design needs.

Warning Badge VariationsFree

All badges are designed with a distinct yellow color to signify caution or provide non-critical warnings. Customize background opacity and roundedness to fit your design needs.