Toasts

A succinct message that is displayed temporarily.

You'll need to handle positioning and animating toasts on your own for now, but watch this space!

Toasts

Short toast message

Success toast message

Warning toast message

Danger toast message

<div class="ch-toast">
  <p>Short toast message</p>
  <button>
    <span class="ch-reader">Close</span>
  </button>
</div>

<div class="ch-toast ch-toast--success">...</div>

<div class="ch-toast ch-toast--warning">...</div>

<div class="ch-toast ch-toast--danger">...</div>

Toasts with icons

Short toast message

Success toast message

Warning toast message

Danger toast message

<div class="ch-toast ch-toast--icon">
  <p>Short toast message</p>
  <button>
    <span class="ch-reader">Close</span>
  </button>
</div>

<div class="ch-toast ch-toast--icon ch-toast--success">...</div>

<div class="ch-toast ch-toast--icon ch-toast--warning">...</div>

<div class="ch-toast ch-toast--icon ch-toast--danger">...</div>

Outline-style toasts

Short toast message

Success toast message

Warning toast message

Danger toast message

<div class="ch-toast ch-toast--outline">
  <p>Short toast message</p>
  <button>
    <span class="ch-reader">Close</span>
  </button>
</div>

<div class="ch-toast ch-toast--outline ch-toast--success">...</div>

<div class="ch-toast ch-toast--outline ch-toast--warning">...</div>

<div class="ch-toast ch-toast--outline ch-toast--danger">...</div>

Outline-style toasts with icons

Short toast message

Success toast message

Warning toast message

Danger toast message

<div class="ch-toast ch-toast--icon ch-toast--outline">
  <p>Short toast message</p>
  <button>
    <span class="ch-reader">Close</span>
  </button>
</div>

<div class="ch-toast ch-toast--icon ch-toast--outline ch-toast--success">
  ...
</div>

<div class="ch-toast ch-toast--icon ch-toast--outline ch-toast--warning">
  ...
</div>

<div class="ch-toast ch-toast--icon ch-toast--outline ch-toast--danger">
  ...
</div>