Tailwind CSS Badge - React

Use our Tailwind CSS Badge component to show status in your web projects. The Badge can be used as a visual identifier for notifications on your website.

See below our beautiful Badge example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.


Badge Colors

The Badge component comes with 20 different colors that you can change it using the color prop.

Badge Placement

You can change the position of the Badge component using the placement prop.

Badge Overlap

You can change the overlap of the Badge component using the overlap prop. This can help to place the Badge component on it's right place when using it with circular elements.

profile picture5
profile picture

Badge with Border

You can add a border to the Badge component using the withBorder prop.


Dot Badge

You can use the Badge component as a dot when you don't provide and content prop.

Edit this page on Github