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.


5
import { Badge, Button } from "@material-tailwind/react";
 
export function BadgeDefault() {
  return (
    <Badge content="5">
      <Button>Notifications</Button>
    </Badge>
  );
}

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 BadgeColors() {
  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 BadgePlacement() {
  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.

5
profile picture5
profile picture
import { Badge, IconButton, Avatar } from "@material-tailwind/react";
import { HomeIcon } from "@heroicons/react/24/solid";
 
export function BadgeOverlap() {
  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.

5
import { Badge, Button } from "@material-tailwind/react";
 
export function BadgeWithBorder() {
  return (
    <Badge content="5" withBorder>
      <Button>Notifications</Button>
    </Badge>
  );
}

Badge Dot

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

import { Badge, Button } from "@material-tailwind/react";
 
export function BadgeDot() {
  return (
    <Badge>
      <Button>Settings</Button>
    </Badge>
  );
}

Badge Custom Styles

You can use the className prop to add custom styles to the Badge component.

import { Badge, Button } from "@material-tailwind/react";
import {CheckIcon} from "@heroicons/react/24/outline";
 
export function BadgeCustomStyles() {
  return (
    <Badge
      content={<CheckIcon className="h-4 w-4 text-white" strokeWidth={2.5} />}
      className="bg-gradient-to-tr from-green-400 to-green-600 border-2 border-white shadow-lg shadow-black/20"
    >
      <Button>Notifications</Button>
    </Badge>
  );
}

Badge Props

The following props are available for badge component. These are the custom props that we've added for the badge component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
colorColorChange badge colorred
invisiblebooleanChange the badge visibilityfalse
withBorderbooleanAdd white border around badgefalse
overlapoverlapShape the badge should overlap.square
contentnodeAdd content for the badgeundefined
childrennodeThe element that badge should be add toundefined
placementPlacementChange the badge placementtop-end
classNamestringAdd custom className for badge''
containerPropsobjectAdd custom props for badge containerundefined
containerRefrefReference to badge container.undefined


For TypeScript Only

import type { BadgeProps } from "@material-tailwind/react";

Types - Color

type color =
  | "white"
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

Types - Overlap

type size = "circular" | "square";

Types - Placement

type placement = "top-start" | "top-end" | "bottom-start" | "bottom-end";

Badge Theme

Learn how to customize the theme and styles for badge component, the theme object for badge component has three main objects:

A. The defaultProps object for setting up the default value for props of badge component.
B. The valid object for customizing the valid values for badge component props.
C. The styles object for customizing the theme and styles of badge component.

You can customize the theme and styles of badge component by adding Tailwind CSS classes as key paired values for objects.



Badge Theme Object Type

interface BadgeStyleTypes {
  defaultProps?: {
    color?: string;
    invisible?: boolean;
    placement?: string;
    withBorder?: boolean;
    overlap?: string;
    content?: node;
    className?: string;
    containerProps?: object;
  };
  valid?: {
    colors?: string[];
    overlaps?: string[];
    placements?: string[];
  };
  styles?: {
    base?: {
      container?: object;
      badge?: {
        initial?: object;
        withBorder?: object;
        withContent?: object;
      };
    };
    placements?: {
      "top-start"?: {
        square?: object;
        circular?: object;
      };
      "top-end"?: {
        square?: object;
        circular?: object;
      };
      "bottom-start"?: {
        square?: object;
        circular?: object;
      };
      "bottom-end"?: {
        square?: object;
        circular?: object;
      };
    };
    colors?: object;
  };
}


For TypeScript Only

import type { BadgeStyleTypes } from "@material-tailwind/react";

Badge Theme Customization

const theme = {
  badge: {
    defaultProps: {
      color: "red",
      invisible: false,
      withBorder: false,
      overlap: "square",
      content: undefined,
      placement: "top-end",
      className: undefined,
      containerProps: undefined,
    },
    valid: {
      colors: [
        "white",
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
      overlaps: ["circular", "square"],
      placements: ["top-start", "top-end", "bottom-start", "bottom-end"],
    },
    styles: {
      base: {
        container: {
          position: "relative",
          display: "inline-flex",
        },
        badge: {
          initial: {
            position: "absolute",
            minWidth: "min-w-[12px]",
            minHeight: "min-h-[12px]",
            borderRadius: "rounded-full",
            paddingY: "py-1",
            paddingX: "px-1",
            fontSize: "text-xs",
            fontWeight: "font-medium",
            content: "content-['']",
            lineHeight: "leading-none",
            display: "grid",
            placeItems: "place-items-center",
          },
          withBorder: {
            borderWidth: "border-2",
            borderColor: "border-white",
          },
          withContent: {
            minWidth: "min-w-[24px]",
            minHeight: "min-h-[24px]",
          },
        },
      },
      placements: {
        "top-start": {
          square: {
            top: "top-[4%]",
            left: "left-[2%]",
            translateX: "-translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
          circular: {
            top: "top-[14%]",
            left: "left-[14%]",
            translateX: "-translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
        },
        "top-end": {
          square: {
            top: "top-[4%]",
            right: "right-[2%]",
            translateX: "translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
          circular: {
            top: "top-[14%]",
            right: "right-[14%]",
            translateX: "translate-x-2/4",
            translateY: "-translate-y-2/4",
          },
        },
        "bottom-start": {
          square: {
            bottom: "bottom-[4%]",
            left: "left-[2%]",
            translateX: "-translate-x-2/4",
            translateY: "translate-y-2/4",
          },
          circular: {
            bottom: "bottom-[14%]",
            left: "left-[14%]",
            translateX: "-translate-x-2/4",
            translateY: "translate-y-2/4",
          },
        },
        "bottom-end": {
          square: {
            bottom: "bottom-[4%]",
            right: "right-[2%]",
            translateX: "translate-x-2/4",
            translateY: "translate-y-2/4",
          },
          circular: {
            bottom: "bottom-[14%]",
            right: "right-[14%]",
            translateX: "translate-x-2/4",
            translateY: "translate-y-2/4",
          },
        },
      },
      colors: {
        white: {
          backgroud: "bg-white",
          color: "text-blue-gray-900",
        },
        "blue-gray": {
          backgroud: "bg-blue-gray-500",
          color: "text-white",
        },
        gray: {
          backgroud: "bg-gray-500",
          color: "text-white",
        },
        brown: {
          backgroud: "bg-brown-500",
          color: "text-white",
        },
        "deep-orange": {
          backgroud: "bg-deep-orange-500",
          color: "text-white",
        },
        orange: {
          backgroud: "bg-orange-500",
          color: "text-white",
        },
        amber: {
          backgroud: "bg-amber-500",
          color: "text-black",
        },
        yellow: {
          backgroud: "bg-yellow-500",
          color: "text-black",
        },
        lime: {
          backgroud: "bg-lime-500",
          color: "text-black",
        },
        "light-green": {
          backgroud: "bg-light-green-500",
          color: "text-white",
        },
        green: {
          backgroud: "bg-green-500",
          color: "text-white",
        },
        teal: {
          backgroud: "bg-teal-500",
          color: "text-white",
        },
        cyan: {
          backgroud: "bg-cyan-500",
          color: "text-white",
        },
        "light-blue": {
          backgroud: "bg-light-blue-500",
          color: "text-white",
        },
        blue: {
          backgroud: "bg-blue-500",
          color: "text-white",
        },
        indigo: {
          backgroud: "bg-indigo-500",
          color: "text-white",
        },
        "deep-purple": {
          backgroud: "bg-deep-purple-500",
          color: "text-white",
        },
        purple: {
          backgroud: "bg-purple-500",
          color: "text-white",
        },
        pink: {
          backgroud: "bg-pink-500",
          color: "text-white",
        },
        red: {
          backgroud: "bg-red-500",
          color: "text-white",
        },
      },
    },
  },
};

Explore More Tailwind CSS Examples

Looking for more badge examples? Check out our Table Examples from Material Tailwind Blocks.