title | description | navigation | github | prev | next | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Tailwind CSS Badge for React - Material Tailwind |
Customise your web projects with our easy-to-use badge component for Tailwind CSS and React using Material Design guidelines. |
|
badge |
avatar |
breadcrumbs |
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.
<CodePreview component={<BadgeExamples.BadgeDefault />}>
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.
<CodePreview component={<BadgeExamples.BadgeColors />}>
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.
<CodePreview component={<BadgeExamples.BadgePlacement />}>
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.
<CodePreview component={<BadgeExamples.BadgeOverlap />}>
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&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>
);
}
## Badge with Border
You can add a border to the Badge
component using the withBorder
prop.
<CodePreview component={<BadgeExamples.BadgeWithBorder />}>
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.
<CodePreview component={<BadgeExamples.BadgeDot />}>
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.
<CodePreview component={<BadgeExamples.BadgeCustomStyles />}>
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.
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 |
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;
};
}
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",
},
},
},
},
};