Tailwind CSS Badge - React

Use our React 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 examples 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.

For the examples below we used Iconoir icons but you can use any icon library you prefer.

Badge Demo

Here's how to implement a simple Badge component. It can be used for showing notifications count in your website.

5
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeDemo() {
  return (
    <Badge color="error">
      <Badge.Content>
        <IconButton>
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator>5</Badge.Indicator>
    </Badge>
  );
}
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeDemo() {
  return (
    <Badge color="error">
      <Badge.Content>
        <IconButton>
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator>5</Badge.Indicator>
    </Badge>
  );
}

Badge Colors

We provide different badge colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the badge color.

In the example below, we've showcased the different badge colors that you can use in your project.

5
5
5
5
5
5
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeColors() {
  return (
    <div className="flex w-full justify-center gap-8">
      <Badge color="primary">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="secondary">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="info">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="success">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="warning">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="error">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
    </div>
  );
}
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeColors() {
  return (
    <div className="flex w-full justify-center gap-8">
      <Badge color="primary">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="secondary">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="info">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="success">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="warning">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge color="error">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
    </div>
  );
}

Badge Placement

You can use the placement prop to change the position of the badge. In the example below, we've showcased the different placement for the Badge component that you can use in your project.

5
5
5
5
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgePlacement() {
  return (
    <div className="flex w-full justify-center gap-8">
      <Badge placement="top-start">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="top-end">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="bottom-start">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="bottom-end">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
    </div>
  );
}
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgePlacement() {
  return (
    <div className="flex w-full justify-center gap-8">
      <Badge placement="top-start">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="top-end">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="bottom-start">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="bottom-end">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
    </div>
  );
}

Badge Dot

You can make the Badge component as a dot by removing the Badge.Indicator content. In the example below, we've showcased the Badge component as a dot that you can use in your project.

import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeDot() {
  return (
    <Badge>
      <Badge.Content>
        <IconButton color="secondary">
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator />
    </Badge>
  );
}
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeDot() {
  return (
    <Badge>
      <Badge.Content>
        <IconButton color="secondary">
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator />
    </Badge>
  );
}

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 or square elements.

5
profile-picture
5
profile-picture
import { Badge, IconButton, Avatar } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeOverlap() {
  return (
    <div className="flex w-full items-center justify-center gap-8">
      <Badge placement="top-end" overlap="square">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="top-end" overlap="square">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator />
      </Badge>
      <Badge placement="bottom-end" overlap="circular">
        <Badge.Content>
          <Avatar src="https://dub.sh/TdSBP0D" alt="profile-picture" />
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="bottom-end" overlap="circular">
        <Badge.Content>
          <Avatar src="https://dub.sh/TdSBP0D" alt="profile-picture" />
        </Badge.Content>
        <Badge.Indicator />
      </Badge>
    </div>
  );
}
import { Badge, IconButton, Avatar } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeOverlap() {
  return (
    <div className="flex w-full items-center justify-center gap-8">
      <Badge placement="top-end" overlap="square">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="top-end" overlap="square">
        <Badge.Content>
          <IconButton color="secondary">
            <Bell className="h-4 w-4 stroke-2" />
          </IconButton>
        </Badge.Content>
        <Badge.Indicator />
      </Badge>
      <Badge placement="bottom-end" overlap="circular">
        <Badge.Content>
          <Avatar src="https://dub.sh/TdSBP0D" alt="profile-picture" />
        </Badge.Content>
        <Badge.Indicator>5</Badge.Indicator>
      </Badge>
      <Badge placement="bottom-end" overlap="circular">
        <Badge.Content>
          <Avatar src="https://dub.sh/TdSBP0D" alt="profile-picture" />
        </Badge.Content>
        <Badge.Indicator />
      </Badge>
    </div>
  );
}

Badge with Border

You can add a border to the Badge component using the className prop for the Badge.Indicator. In the example below, we've showcased the Badge component with a border that you can use in your project.

5
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeWithBorder() {
  return (
    <Badge>
      <Badge.Content>
        <IconButton color="secondary">
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator className="border-background">
        5
      </Badge.Indicator>
    </Badge>
  );
}
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell } from "iconoir-react";

export function BadgeWithBorder() {
  return (
    <Badge>
      <Badge.Content>
        <IconButton color="secondary">
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator className="border-background">
        5
      </Badge.Indicator>
    </Badge>
  );
}

Badge Custom Styles

You can customize the Badge component using the className prop. In the example below, we've showcased the Badge component with custom styles that you can use in your project.

import { Badge, IconButton } from "@material-tailwind/react";
import { Bell, Check } from "iconoir-react";

export function BadgeCustomStyles() {
  return (
    <Badge>
      <Badge.Content>
        <IconButton color="secondary">
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator className="border-white bg-black px-1 py-1 shadow-lg shadow-black/25">
        <Check className="h-3 w-3 stroke-2" />
      </Badge.Indicator>
    </Badge>
  );
}
import { Badge, IconButton } from "@material-tailwind/react";
import { Bell, Check } from "iconoir-react";

export function BadgeCustomStyles() {
  return (
    <Badge>
      <Badge.Content>
        <IconButton color="secondary">
          <Bell className="h-4 w-4 stroke-2" />
        </IconButton>
      </Badge.Content>
      <Badge.Indicator className="border-white bg-black px-1 py-1 shadow-lg shadow-black/25">
        <Check className="h-3 w-3 stroke-2" />
      </Badge.Indicator>
    </Badge>
  );
}