Skip to content
Display

Badge

A small inline label for status, categories, or counts. Use alongside cards, list items, and table cells.

LlmBadge
WCAG AA0 deps

Demo

Live PreviewReact
DefaultActivePendingErrorInfoSmall
jsx
<LlmBadge>Default</LlmBadge>
<LlmBadge variant="success">Active</LlmBadge>
<LlmBadge variant="warning">Pending</LlmBadge>
<LlmBadge variant="danger">Error</LlmBadge>
<LlmBadge variant="info">Info</LlmBadge>
<LlmBadge size="sm" variant="success">Small</LlmBadge>

API (Angular)

PropTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'danger' | 'info''default'Color scheme of the badge
size'sm' | 'md''md'Size of the badge

Import

ts
import { LlmBadge } from '@atelier-ui/angular';