Badge
Badge is a component component that provides badge functionality.
Active
Primary
12
Examples
variant
Different variant options for the Badge component.
default
Primary
12
secondary
Secondary
3
destructive
Destructive
5
outline
Outline
99+
Installation
npm install @your-design-system/badgeimport { Badge } from "@/components/ui/badge"
export function BadgeDemo() {
return (
<div className="flex items-center space-x-2">
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
</div>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | - | The content to display inside the component. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
inline-flexitems-centerrounded-mdborderpx-2py-0.5text-xsfont-mediumtransition-colorsvariant Variants
default
bg-primarytext-primary-foregroundborder-transparentsecondary
bg-secondarytext-secondary-foregroundborder-transparentdestructive
bg-destructivetext-whiteborder-transparentoutline
bordertext-foregroundDesign System Compliance
This component is validated against atomic design principles and foundation token usage.
⚠ Atomic Design Issues
Issue 1Hardcoded spacing found: px-2, py-0.5. Use semantic spacing tokens.
Fix these issues to ensure your component integrates properly with the design system.
On This Page