Toast

Toasts are non-modal dialogs used as a way to provide feedback following user action. They are typically composed of a short message appearing at the bottom of the screen, to make them as discreet as possible.

Example

Rows successfully inserted

<div class="nj-toast">
  <div class="nj-toast__gauge" role="progressbar" aria-label="time left until toast is closed" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="nj-toast__gauge-bar"></div>
  </div>
  <div class="nj-toast__body">
    <div class="nj-toast__content">
      <p class="nj-toast__text">Rows successfully inserted</p>
    </div>
  </div>
  <div class="nj-toast__action">
    <button type="button" aria-label="Close" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse">
      <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
</div>

Contrast variations

The toast is meant to stand out on its background.

For that reason, default toast is dark, but we also provide an inverse variant for darker backgrounds. You can use it with the .nj-toast--inverse modifier.

Rows successfully inserted

Rows successfully inserted

<div style="display: flex; gap: 16px; flex-direction: column;">
  <div class="nj-toast">
    <div class="nj-toast__gauge" role="progressbar" aria-label="time left until toast is closed" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
      <div class="nj-toast__gauge-bar"></div>
    </div>
    <div class="nj-toast__body">
      <div class="nj-toast__content">
        <p class="nj-toast__text">Rows successfully inserted</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" aria-label="Close" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse">
        <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </div>
  </div>

  <div class="nj-toast nj-toast--inverse">
    <div class="nj-toast__gauge" role="progressbar" aria-label="time left until toast is closed" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
      <div class="nj-toast__gauge-bar"></div>
    </div>
    <div class="nj-toast__body">
      <div class="nj-toast__content">
        <p class="nj-toast__text">Rows successfully inserted</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" aria-label="Close" class="nj-icon-btn nj-icon-btn--secondary nj-icon-btn--lg">
       <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </div>
  </div>
</div>

With title

You can add a title by adding a <p class="nj-toast__title"></p> in the nj-toast__content element.

Your table has been updated !

Rows successfully inserted

<div class="nj-toast">
  <div class="nj-toast__gauge" role="progressbar" aria-label="time left until toast is closed" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="nj-toast__gauge-bar"></div>
  </div>
  <div class="nj-toast__body">
    <div class="nj-toast__content">
      <p class="nj-toast__title">Your table has been updated !</p>
      <p class="nj-toast__text">Rows successfully inserted</p>
    </div>
  </div>
  <div class="nj-toast__action">
    <button type="button" aria-label="Close" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse">
     <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
</div>

With icon

You can add an icon in the nj-toast__body element.

check

Your table has been updated !

Rows successfully inserted

<div class="nj-toast">
  <div class="nj-toast__body">
    <i class="material-icons nj-toast__icon">check</i>
    <div class="nj-toast__content">
      <p class="nj-toast__title">Your table has been updated !</p>
      <p class="nj-toast__text">Rows successfully inserted</p>
    </div>
  </div>
  <div class="nj-toast__action">
    <button type="button" aria-label="Close" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse">
     <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </div>
</div>

Gauge duration

By default, the gauge has a duration of 5 seconds.

You can change it by overriding the animation-duration property on the nj-toast__gauge-bar element.

You can also completely remove the gauge by deleting the nj-toast__gauge element.

check

10 sec gauge duration

check

No gauge

<div style="display: flex; gap: 16px; flex-direction: column;">
  <div class="nj-toast">
    <div class="nj-toast__gauge" role="progressbar" aria-label="time left until toast is closed" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
      <div class="nj-toast__gauge-bar" style="animation-duration: 10s;"></div>
    </div>
    <div class="nj-toast__body">
      <i class="material-icons nj-toast__icon">check</i>
      <div class="nj-toast__content">
        <p class="nj-toast__text">10 sec gauge duration</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" aria-label="Close" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse">
       <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </div>
  </div>

  <div class="nj-toast">
    <div class="nj-toast__body">
      <i class="material-icons nj-toast__icon">check</i>
      <div class="nj-toast__content">
        <p class="nj-toast__text">No gauge</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" aria-label="Close" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse">
       <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </div>
  </div>

</div>

Without close button

You can remove the close button by deleting the nj-toast__action element. The toast will need to be deleted programmatically.

We do not recommend this action for accessibility purposes. At least provide a way for the user to remove the toast.

check

No close button

<div class="nj-toast">
  <div class="nj-toast__body">
    <i class="material-icons nj-toast__icon">check</i>
    <div class="nj-toast__content">
      <p class="nj-toast__text">No close button</p>
    </div>
  </div>
</div>

Toast container

Toasts should be positioned fixed in the bottom center of the screen.

We provide an .nj-toast__container element to help position it correctly. Simply wrap the toasts with this element.

Toasts will stack with the last on the bottom.

By default, the toast container fixes the width of the toasts to 480px (minus the 32px padding).

You can add the .nj-toast__container--full-width class modifier to make the toasts full width.

Usage

Toasts should be used for non-critical feedback, requiring no further action from users and ending an interaction sequence. If further action is needed and/or feedback is critical, Notifications might be more appropriate.

Toasts are either displayed temporarily or persistently, with a mandatory dismiss button for the latter. They may include an icon to facilitate comprehension.

Toasts should not be the only way to check for completion. For instance, when a user deletes a given number of entries in a data table, the updated total amount of entries is an alternative way to check the deletion occurred.

Accessibility

As far as accessibility is concerned, we recommend to be mindful of the following:

  • Leave enough time for your users to take the toast message into account. If possible, provide settings for users to select display duration or have the messages persist until dismissal
  • As far as design is concerned, provide an alternative way to check for the result of an interaction. People using magnifying software might miss toast messages