Pill

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

<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)

<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>