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
<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
<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>