Badge
Badge is a native web component that displays a small status or category label, with color variants for neutral, primary, success, warning, danger and info. Use it to highlight states (active, pending, error), tags or counters next to text and titles. Optionally it shows a leading colored dot to signal status more subtly.
Preview
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<pura-badge>Draft</pura-badge>
<pura-badge variant="primary">New</pura-badge>
<pura-badge variant="success" dot>Active</pura-badge>
<pura-badge variant="warning" dot>Pending</pura-badge>
<pura-badge variant="danger">Error</pura-badge>
<pura-badge variant="info">Beta</pura-badge>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | neutral | Defines the color scheme of the badge. |
dot | boolean | false | When present, shows a colored dot before the content. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/badge.js"></script>import "./pura/lib/badge.js";