Badge
Badge is an element for the use of drawing attention to additional interface information with eye-catching appeal, typically displaying unread messages count.
Basic Buttons
js
import Badge from "@/components/Badge";
const Example = () => {
return (
<div>
<div>
<Badge label="primary" className="bg-primary-500 text-white" />
</div>
</div>
);
};
TIP
You can use className for badge type. Available types: className="bg-primary-500 text-white", className="bg-secondary-500 text-white", className="bg-success-500 text-white", className="bg-info-500 text-white", className="bg-danger-500 text-white", className="bg-warning-500 text-white",
Pill Badges
Just add an extra class pill to make a pill badge.
Soft Badges
Just add an extra class bg-opacity-[0.12] to make a soft badge.
Badges With Icon
Just add props icon="heroicons-outline:star" to add an icon to the badge.