Badge

Inline status indicator. Supports semantic colors and custom hex values.

Preview

Usage

import { Badge } from '@ramtt/ui'

<Badge>Default</Badge>
<Badge color="positive">Active</Badge>
<Badge color="negative">Error</Badge>
<Badge variant="outline" color="warning">Warning</Badge>

Props

PropTypeDefaultDescription
variant'filled' | 'outline''filled'Badge style
color'default' | 'positive' | 'negative' | 'warning' | 'info' | string'default'Color preset or hex value
size'sm' | 'md''sm'Badge size
children*ReactNodeBadge content
classNamestringAdditional Tailwind classes