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.

import { Badge, Button } from "@material-tailwind/react";
 
export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Badge color="red">
        <Button>Red</Button>
      </Badge>
      <Badge color="green">
        <Button>Green</Button>
      </Badge>
      <Badge color="amber">
        <Button>Amber</Button>
      </Badge>
      <Badge color="purple">
        <Button>Purple</Button>
      </Badge>
    </div>
  );
}

Badge Placement

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

import { Badge, Button } from "@material-tailwind/react";
 
export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Badge placement="top-start">
        <Button>Top Start</Button>
      </Badge>
      <Badge placement="top-end">
        <Button>Top End</Button>
      </Badge>
      <Badge placement="bottom-start">
        <Button>Bottom Start</Button>
      </Badge>
      <Badge placement="bottom-end">
        <Button>Bottom End</Button>
      </Badge>
    </div>
  );
}

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.

import { Badge, IconButton, Avatar } from "@material-tailwind/react";
import { HomeIcon } from "@heroicons/react/24/solid";
 
export function Example() {
  return (
    <div className="flex items-center gap-8">
      <Badge content="5">
        <IconButton>
          <HomeIcon className="h-4 w-4" />
        </IconButton>
      </Badge>
      <Badge>
        <IconButton>
          <HomeIcon className="h-4 w-4" />
        </IconButton>
      </Badge>
      <Badge content="5" overlap="circular" placement="bottom-end">
        <Avatar
          src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
          alt="profile picture"
        />
      </Badge>
      <Badge overlap="circular" placement="bottom-end">
        <Avatar
          src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
          alt="profile picture"
        />
      </Badge>
    </div>
  );
}

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.

avatar

breadcrumbs

Edit this page on Github