Link to Fluid's Microsoft Teams channel Link to the support page

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.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

angular logo Angularopen_in_new
react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

Example

Rows successfully inserted

The toast will be automatically closed in 5s

<div class="nj-toast">
  <div class="nj-toast__body">
    <div class="nj-toast__content">
      <p class="nj-toast__text" id="toast-1">Rows successfully inserted</p>
    </div>
  </div>
  <div class="nj-toast__action">
    <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse" aria-describedby="toast-1">
      <span class="nj-sr-only">Close notification</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-toast__gauge">
    <div class="nj-toast__gauge-bar">
      <p class="nj-sr-only">The toast will be automatically closed in 5s</p>
    </div>
  </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

The toast will be automatically closed in 5s

Rows successfully inserted

The toast will be automatically closed in 5s

<div style="display: flex; gap: 16px; flex-direction: column;">
  <div class="nj-toast">
    <div class="nj-toast__body">
      <div class="nj-toast__content">
        <p class="nj-toast__text" id="toast-1">Rows successfully inserted</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse" aria-describedby="toast-1">
        <span class="nj-sr-only">Close notification</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-toast__gauge">
      <div class="nj-toast__gauge-bar">
        <p class="nj-sr-only">The toast will be automatically closed in 5s</p>
      </div>
    </div>
  </div>

  <div class="nj-toast nj-toast--inverse">
    <div class="nj-toast__body">
      <div class="nj-toast__content">
        <p class="nj-toast__text" id="toast-5">Rows successfully inserted</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" class="nj-icon-btn nj-icon-btn--secondary nj-icon-btn--lg" aria-describedby="toast-5">
        <span class="nj-sr-only">Close notification</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-toast__gauge">
      <div class="nj-toast__gauge-bar">
        <p class="nj-sr-only">The toast will be automatically closed in 5s</p>
      </div>
    </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

The toast will be automatically closed in 5s

<div class="nj-toast">
  <div class="nj-toast__body">
    <div class="nj-toast__content">
      <p class="nj-toast__title" id="toast-3">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" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse" aria-describedby="toast-3">
      <span class="nj-sr-only">Close notification</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-toast__gauge">
    <div class="nj-toast__gauge-bar">
      <p class="nj-sr-only">The toast will be automatically closed in 5s</p>
    </div>
  </div>
</div>

With icon

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

Your table has been updated !

Rows successfully inserted

The toast will be automatically closed in 5s

<div class="nj-toast">
  <div class="nj-toast__body">
    <span aria-hidden="true" class="material-icons nj-toast__icon">check</span>
    <div class="nj-toast__content">
      <p class="nj-toast__title" id="toast-4">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" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse" aria-describedby="toast-4">
      <span class="nj-sr-only">Close notification</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-toast__gauge">
    <div class="nj-toast__gauge-bar">
      <p class="nj-sr-only">The toast will be automatically closed in 5s</p>
    </div>
  </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.

10 sec gauge duration

The toast will be automatically closed in 5s

No gauge

<div style="display: flex; gap: 16px; flex-direction: column;">
  <div class="nj-toast">
    <div class="nj-toast__body">
      <span aria-hidden="true" class="material-icons nj-toast__icon">check</span>
      <div class="nj-toast__content">
        <p class="nj-toast__text" id="toast-4">10 sec gauge duration</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse" aria-describedby="toast-4">
        <span class="nj-sr-only">Close notification</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-toast__gauge">
      <div class="nj-toast__gauge-bar" style="animation-duration: 10s;">
        <p class="nj-sr-only">The toast will be automatically closed in 5s</p>
      </div>
    </div>
  </div>

  <div class="nj-toast">
    <div class="nj-toast__body">
      <span aria-hidden="true" class="material-icons nj-toast__icon">check</span>
      <div class="nj-toast__content">
        <p class="nj-toast__text" id="toast-5">No gauge</p>
      </div>
    </div>
    <div class="nj-toast__action">
      <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--inverse" aria-describedby="toast-5">
        <span class="nj-sr-only">Close notification</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </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.

No close button

<div class="nj-toast">
    <div class="nj-toast__body">
      <span aria-hidden="true" class="material-icons nj-toast__icon">check</span>
      <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 sets 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.

Tag

Toggle