Docs
badge
badge
A versatile badge component for labels, statuses, and more.
Badge
Features
- Supports multiple styles, sizes, and borders with Tailwind theming
- Built-in hover, focus, and ring states for accessibility
- Icon-ready with circular
icon
mode and smart sizing - Lightweight, ref-forwarding, and easily composable
- Powered by
@gentleduck/variants
for scalable, consistent design
Installation
npx duck-ui@latest add badge
npx duck-ui@latest add badge
Usage
import { Badge } from '@/components/ui/badge'
import { Badge } from '@/components/ui/badge'
<Badge variant="secondary">Badge</Badge>
<Badge variant="secondary">Badge</Badge>
Badge
Badge
is a flexible and customizable React component used to display small status indicators with
Tooltip
, ..etc.
Example Usage:
import { Badge } from '@/components/ui/badge'
const MyBadge = () => {
return (
<Tooltip>
<TooltipTrigger asChild>
<Badge arial-label="Badge" variant={'outline'} size={'icon'} className="rounded-full">
<Info />
</Badge>
</TooltipTrigger>
<TooltipContent>Info Badge</TooltipContent>
</Tooltip>
)
}
import { Badge } from '@/components/ui/badge'
const MyBadge = () => {
return (
<Tooltip>
<TooltipTrigger asChild>
<Badge arial-label="Badge" variant={'outline'} size={'icon'} className="rounded-full">
<Info />
</Badge>
</TooltipTrigger>
<TooltipContent>Info Badge</TooltipContent>
</Tooltip>
)
}
Variants
Default
Badge
Secondary
Badge
Destructive
Badge
Warning
Badge
Dashed
Badge
Outline
Badge
Icon
API Reference
Badge Props
size
('default' | 'sm' | 'lg' | 'icon'
, optional):variant
('default' | 'secondary' | 'destructive' | 'warning' | 'dashed' | 'outline' | 'nothing'
, optional):border
('default' | 'primary' | 'secondary' | 'destructive' | 'warning'
, optional):...props
(React.HTMLAttributes<HTMLDivElement>
):