Badge

A small pill for counts, tags and statuses.

Class	Does what
`badge`	Rounded pill on a raised surface
`text-error`	Error-colored text, for validation messages
`text-secondary`	Muted text

Basic

<div class="prose">
  <p>Status <small class="badge">Draft</small> <small class="badge">3 open</small></p>
</div>

<div>
  <p>Status <small class="chip">Draft</small> <small class="chip">3 open</small></p>
</div>

<div class="prose">
  <p class="text-secondary">Secondary text</p>
  <small class="text-error">That email address is already taken.</small>
</div>

<div>
  <p class="secondary">Secondary text</p>
  <small class="error">That email address is already taken.</small>
</div>