Badge
A badge or a component that looks like a badge.
Badge composes Base UI's useRender and mergeProps with cva variants, so it
can render as a span, a link or a button, and marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/badgeExample
badge-example.tsx
import { Badge } from '@/components/ui/badge';
const BadgeExample = () => (
<div className='flex flex-wrap gap-2'>
<Badge>Default</Badge>
<Badge variant='secondary'>Secondary</Badge>
<Badge variant='outline'>Outline</Badge>
<Badge variant='destructive'>Destructive</Badge>
<Badge variant='success'>Success</Badge>
<Badge variant='warning'>Warning</Badge>
<Badge variant='info'>Info</Badge>
</div>
);
export default BadgeExample;
Usage
import { Badge } from '@/components/ui/badge';
const BadgeDemo = () => <Badge>Badge</Badge>;Variants
| Part | Prop | Values |
|---|---|---|
Badge | size | default, lg, sm |
Badge | variant | default, destructive, error, info, outline, secondary, success, warning |