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>
);
}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>
);
}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>
);
}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
5import { 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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
alt="profile picture"
/>
</Badge>
</div>
);
}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>
);
}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>
);
}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>
);
}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.
| Attribute | Type | Description | Default |
|---|---|---|---|
color | Color | Change badge color | red |
invisible | boolean | Change the badge visibility | false |
withBorder | boolean | Add white border around badge | false |
overlap | overlap | Shape the badge should overlap. | square |
content | node | Add content for the badge | undefined |
children | node | The element that badge should be add to | undefined |
placement | Placement | Change the badge placement | top-end |
className | string | Add custom className for badge | '' |
containerProps | object | Add custom props for badge container | undefined |
containerRef | ref | Reference to badge container. | undefined |
For TypeScript Only
import type { BadgeProps } from "@material-tailwind/react";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";type size = "circular" | "square";type placement = "top-start" | "top-end" | "bottom-start" | "bottom-end";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.
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";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",
},
},
},
},
};