Chip
A chip is a small inline label: a tag, a filter, a badge. Static ones are a
span; interactive ones are a button or an a. They wrap
in a flow.
<span class="chip">default</span>
<span class="chip accent">accent</span>
<button class="chip">filter</button>Colors
A plain chip is neutral. Add accent or teal to
color it.
default
accent
teal
<span class="chip">default</span>
<span class="chip accent">accent</span>
<span class="chip teal">teal</span>Interactive
Make a chip interactive by using a button for a filter or an
a for a tag. They sit in the same flow as static chips.
<button class="chip">filter</button>
<a class="chip" href="#">a tag</a>