Skip to content

Badge

Default
Outline
Solid
Hachure
Terminal window
npx skeci-ui add badge
import { Badge } from '@/components/ui/badge';
<Badge variant="outline">Badge</Badge>

Colors

Destructive
Success
Primary
Warning

Normal Border

Default
Destructive
Outline
PropTypeDefaultDescription
variant'default' | 'outline' | 'hachure' | 'solid''default'The visual style.
colorstring'#333333'The stroke and fill color.
border'rough' | 'none''rough'Whether to use hand-drawn borders.
asChildbooleanfalseWhether to merge props onto the child element.