Pills

Open in Figma View all pill renders 
<div class="pill">pill</div>

Secondary pill

<div class="pill pill--secondary">pill</div>

Variations and modifiers

Pills with icon

<div class="pill"><span class="material-symbols-rounded" aria-hidden="true">info</span>pill</div>
<div class="pill">pill<span class="material-symbols-rounded" aria-hidden="true">info</span></div>

Status Pills

Pills can be coloured to indicate a status of active, warning, alert and neutral 

<div class="pill pill--active">pill</div>
<div class="pill pill--warning">pill</div>
<div class="pill pill--alert">pill</div>
<div class="pill pill--neutral">pill</div>

Pill sizes

Pills can be modified to be small or extra small - pills are medium by default. Icons will size themselves relative to the pill text size. 

<div class="pill pill--small">pill</div>
<div class="pill pill--xsmall">pill</div>