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.

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

Positions

Toasts can appear in either of the corners of the page

.c-alerts--topleft

.c-alerts--topright

.c-alerts--bottomright

.c-alerts--bottomleft