Toasts

Toasts or growls are covered by special modifiers on Alerts and usually appear in one of the corners of your page to draw your attention to something that has happened.

Default
Brand
Info
Warning
Success
Error
<div class="c-alerts c-alerts--topleft">
<div class="c-alert">Default</div>
<div class="c-alert c-alert--brand">Brand</div>
<div class="c-alert c-alert--info">Info</div>
<div class="c-alert c-alert--warning">Warning</div>
<div class="c-alert c-alert--success">Success</div>
<div class="c-alert c-alert--error">Error</div>
</div> 

Positions

Toasts can appear in either of the corners of the page

.c-alerts--topleft

Default

.c-alerts--topright

Default

.c-alerts--bottomright

Default

.c-alerts--bottomleft

Default
This is a toast Just for your information You can't get rid of this warning Yay things worked Argh there is an error
<blaze-toasts position="bottomright">
<blaze-alert open dismissible type="brand">This is a toast</blaze-alert>
<blaze-alert open dismissible type="info">Just for your information</blaze-alert>
<blaze-alert open type="warning">You can't get rid of this warning</blaze-alert>
<blaze-alert open dismissible type="success">Yay things worked</blaze-alert>
<blaze-alert open dismissible type="error">Argh there is an error</blaze-alert>
</blaze-toasts> 

Since "toasts" are simply positioned Alerts you have all the same attributes and methods .

Attributes

Attribute Description
position="topright|bottomright|bottomleft|topleft" Set on the toasts element for which corner the alerts are anchored to