Skip to main content

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.

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

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

Attributes

NameDescription
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

CSS

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