Pill - Component

Code

Source (Nunjucks)

<button class="pill {{ data.utilities }}">{{ data.text }}</button>

Output

<button class="pill">A pill element</button>

Information

For use in smaller, groups of buttons. Many pill elements should be laid out with the cluster.

Apply an active state with either [data-state="active"] or [aria-current="page"].