Other

The smaller bits: inline chips and status banners.

<span class="chip">default</span>
<span class="chip accent">accent</span>
<button class="chip">filter</button>

<div class="status success" role="status">Saved</div>
<div class="status error" role="alert">Email already exists</div>
Chips and status banners at a glance

Chips

A chip is a small inline label: a tag, a filter, a badge. Static ones are a span; interactive ones are a button or a. They wrap in a flow.

default accent teal a tag 
<div class="flow">
  <span class="chip">default</span>
  <span class="chip accent">accent</span>
  <button class="chip">filter</button>
</div>
Chips wrapping in a flow, including an accent chip and a button filter

Status

A status banner is a div class="status" with a type, and a role so assistive tech announces it when it changes.

User created successfully
3 users found
Password expires in 2 days
<div class="status success" role="status">Saved</div>
<div class="status error" role="alert">Email already exists</div>
<div class="status info" role="status">3 users found</div>
Success, error, and info status banners with roles