Skip to main content


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.

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

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


position: stringSet on the toasts element for which corner the alerts are anchored to i.e. topright|bottomright|bottomleft|topleft
dismissible: booleanTurn on the close button
open: booleanToggle the alert


<div aria-label="6 alerts" role="presentation" class="c-alerts c-alerts--bottomright">
  <div role="alert" class="c-alert">Default</div>
  <div role="alert" class="c-alert c-alert--brand">Brand</div>
  <div role="alert" class="c-alert c-alert--info">Info</div>
  <div role="alert" class="c-alert c-alert--warning">Warning</div>
  <div role="alert" class="c-alert c-alert--success">Success</div>
  <div role="alert" class="c-alert c-alert--error">Error</div>