Component
Badge
Compact labels for status, categories, and metadata. High-contrast colors with bold borders and uppercase text.
Variants
DefaultDangerSuccessInfoOutline
All five color variants
tsx
<Badge variant="default">Default</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="outline">Outline</Badge>
Sizes
SmallMedium
Small (default) and medium
tsx
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
Dot Indicator
OnlineOfflineSyncingActive
Dot prepends a colored circle for status indication
tsx
<Badge variant="success" dot>Online</Badge>
<Badge variant="danger" dot>Offline</Badge>
<Badge variant="info" dot>Syncing</Badge>
<Badge variant="default" dot>Active</Badge>
Disabled
ArchivedRemoved
Disabled badges are dimmed
tsx
<Badge disabled>Archived</Badge>
<Badge variant="danger" disabled>Removed</Badge>
Real-World Examples
API ServerOperational
Build PipelineRunning
StagingDown
Badges in context
tsx
{/* Status list */}
<div>
<span>API Server</span>
<Badge variant="success" dot>Operational</Badge>
</div>
<div>
<span>Build Pipeline</span>
<Badge variant="info" dot>Running</Badge>
</div>
<div>
<span>Staging</span>
<Badge variant="danger" dot>Down</Badge>
</div>
Usage
StatusCard.tsx
import { Badge, Card } from 'starkit-ui';
function StatusCard({ status }) {
const variant = status === 'up' ? 'success' : 'danger';
const label = status === 'up' ? 'Operational' : 'Down';
return (
<Card padding="md">
<Badge variant={variant} dot>{label}</Badge>
</Card>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'danger' | 'success' | 'info' | 'outline' | 'default' | Color variant for semantic meaning. |
| size | 'sm' | 'md' | 'sm' | Size of the badge. |
| dot | boolean | false | Shows a circular dot indicator before the label. |
| disabled | boolean | false | Visually dims the badge. |
| className | string | '' | Additional CSS classes. |
All standard <span> HTML attributes are also supported.