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.
The Badge component comes with 20 different colors that you can change it using the color prop.
You can change the position of the Badge component using the placement prop.
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.
5You can add a border to the Badge component using the withBorder prop.
You can use the Badge component as a dot when you don't provide and content prop.
You can use the className prop to add custom styles to the Badge component.
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",
},
},
},
},
};