Badge
Compact status indicators with optional animated pulse dot.
Variants
Section titled “Variants” default · success · warning · info · danger
<ac-badge>Default</ac-badge>
<ac-badge variant="success">Success</ac-badge>
<ac-badge variant="warning">Warning</ac-badge>
<ac-badge variant="info">Info</ac-badge>
<ac-badge variant="danger">Danger</ac-badge>Solid variant
Section titled “Solid variant” solid filled badges
<ac-badge solid>Default</ac-badge>
<ac-badge variant="success" solid>Success</ac-badge>
<ac-badge variant="warning" solid>Warning</ac-badge>
<ac-badge variant="danger" solid>Danger</ac-badge> sm · default · lg
<ac-badge size="sm" variant="success">Small</ac-badge>
<ac-badge variant="success">Default</ac-badge>
<ac-badge size="lg" variant="success">Large</ac-badge>With pulse dot (live status)
Section titled “With pulse dot (live status)” animated pulse
<ac-badge variant="success">
<span class="ac-badge__pulse"></span>
Live
</ac-badge>
<ac-badge variant="danger">
<span class="ac-badge__pulse"></span>
Offline
</ac-badge>Attributes
Section titled “Attributes”| Attribute | Values | Description |
|---|---|---|
variant | default | success | warning | info | danger | Color scheme |
size | sm | lg | Size modifier |
solid | boolean | Filled background instead of tinted |
pill | boolean | Fully rounded (border-radius: full) |