Badge

Stable

Labels and tags for categorization and status indication.

Import

import { Badge } from '@brutal-ui/react';

Variants

DefaultPrimarySuccessDangerWarningInfo

<Badge variant='default'>Default</Badge>
<Badge variant='primary'>Primary</Badge>
<Badge variant='success'>Success</Badge>
<Badge variant='danger'>Danger</Badge>
<Badge variant='warning'>Warning</Badge>
<Badge variant='info'>Info</Badge>

Sizes

SmallMediumLarge

<Badge size='sm'>Small</Badge>
<Badge size='md'>Medium</Badge>
<Badge size='lg'>Large</Badge>

Use Cases

Status:ActiveInactivePending

Tags:ReactTypeScriptTailwind

Priority:HighMediumLow

Props

Prop	Type	Default	Description
variant	string	"default"	Badge color variant
size	string	"md"	Badge size: sm, md, lg