Components
Badge
A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.
import { Badge } from "@/components/ui/component";
export default function BadgeDestructive() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background">
<Badge variant="destructive">Badge</Badge>
</div>
);
}More examples
DefaultOpen page →
OutlineOpen page →
SecondaryOpen page →
InfoOpen page →
SuccessOpen page →
WarningOpen page →
ErrorOpen page →
SmallOpen page →
LargeOpen page →
With IconOpen page →
With CountOpen page →
Dependencies
Tags
Source
Published
Similar components
Explore more
Part of coss — browse the full library on 21st.dev.