# Pill

A small rounded label for tags, statuses, and counts, with an optional leading
status dot. This is `pill.css` in `@layer components`.

```html
<span class="pill">Draft</span>
<span class="pill is-success">
  <span class="pill-dot"></span>
  Active
</span>
```

## Parts

| Class | Role |
|---|---|
| `.pill` | The label: pill-radius, small medium-weight text, a neutral `--bg-muted` fill and `--rule` border by default |
| `.pill-dot` | An optional small leading dot; picks up the pill's color |

## Intents

A bare `.pill` is neutral. The intent modifiers switch the fill, ink, and border
to a status (or accent) triple, and tint the dot to the solid status color:

| Class | Color |
|---|---|
| *(bare)* | Neutral |
| `is-success` | Success |
| `is-warning` | Warning |
| `is-danger` | Danger |
| `is-info` | Info |
| `is-accent` | Accent (your brand color) |

```html
<span class="pill is-warning"><span class="pill-dot"></span>Pending</span>
<span class="pill is-danger"><span class="pill-dot"></span>Failed</span>
<span class="pill is-accent">Pro</span>
```