Dealogic Styleguide

section menu

Toast

Toasts serve as a feedback & confirmation mechanism after the user takes an action.

  • Informative Toasts present a message to a user that may or may not require an action.
  • Positive Toast highlight a positive message or confirmation to a user.
  • Warning Toast highlighti a cautionary message to a user.
  • Error Toast highlight an error or negative message to a user.

Examples

Hey Bobby, this is a small happy successful message… shown within a happy successful toast ;)
Yo Bobbo, quick note - nothing too urget just some useful information.
Bob, listen - this is a warning. Something isn’t bueno.
Bob, CODE RED - something is not right. This is not going well.
Yo Bobbo, quick note - nothing too urget just some useful information.
Yo Bobbo, quick note - nothing too urget just some useful information. I’m also breaking to two lines.
Bob, listen - this is a warning & you’re hovering over me. Read the second line… it’s really important. 
<div class="dl-toast success">
  Hey Bobby, this is a small happy successful message… shown within a happy successful toast ;)
  <dl-icon name="action-close-x"></dl-icon>
</div>

<div class="dl-toast information">
  Yo Bobbo, quick note - nothing too urget just some useful information.
  <dl-icon name="action-close-x"></dl-icon>
</div>

<div class="dl-toast warning">
  Bob, listen - this is a warning. Something isn’t bueno.
  <dl-icon name="action-close-x"></dl-icon>
</div>

<div class="dl-toast error">
  Bob, CODE RED - something is not right. This is not going well.
  <dl-icon name="action-close-x"></dl-icon>
</div>

<div class="dl-toast information">
  Yo Bobbo, quick note - nothing too urget just some useful information.
  <dl-icon name="action-close-x"></dl-icon>
</div>

<div class="dl-toast information">
  Yo Bobbo, quick note - nothing too urget just some useful information. I’m also breaking to two lines.
  <dl-icon name="action-close-x"></dl-icon>
</div>

<div class="dl-toast warning">
  Bob, listen - this is a warning &amp; you’re hovering over me. Read the second line… it’s really important.
  <dl-icon name="action-close-x"></dl-icon>
</div>