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

Alert

Alert provide contextual feedback messages for typical user actions. A handful of flexible alert messages are available.

angular logo

To do

react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

Last updated v4.0.0

This component is deprecated in v5

Please use either the toast or the inline message components instead.

Example

<div class="nj-alert nj-alert--primary" role="alert">
  <span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
  <div><span class="nj-alert__title">Notification</span>Lorem ipsum dolor sit amet, consectetur
    adipisicing elit
    asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

Theme colors

Be sure to use the appropriate icon for the type of your alert.

<div class="nj-alert nj-alert--primary" role="alert">
  <span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>

<div class="nj-alert nj-alert--success" role="alert">
  <span aria-hidden="true" class="material-icons nj-alert__icon">check</span>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>

<div class="nj-alert nj-alert--warning" role="alert">
  <span aria-hidden="true" class="material-icons nj-alert__icon">warning</span>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>

<div class="nj-alert nj-alert--danger" role="alert">
  <span aria-hidden="true" class="material-icons nj-alert__icon">error</span>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>

<div class="bg-blue-corporate px-3 py-1">
  <div class="nj-alert nj-alert--light" role="alert">
    <span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
  </div>
</div>

Dismissing

Note that closing an alert will remove it from the DOM. You can see this in action with a live demo:

<div class="nj-alert nj-alert--primary" role="alert">
  <button type="button" class="nj-close nj-alert__close" aria-label="Close">
    <span aria-hidden="true" class="material-icons nj-alert__close-icon">close</span>
  </button>
  <span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
  <div><span class="nj-alert__title">Notification</span>Lorem ipsum dolor sit amet, consectetur
    adipisicing elit
    asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

Methods

Method Description
close Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.
dispose Destroys an element’s alert.
getInstance Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: NJ.Alert.getInstance(alert) 
  var alertNode = document.querySelector('.alert')
  var alert = Alert.getInstance(alertNode)
  alert.close()

Events

ENGIE’s alert component exposes a few events for hooking into alert functionality.

Event Description
close.nj.alert This event fires immediately when the close instance method is called.
closed.nj.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete). 
  document.querySelector('.my-alert').addEventListener('closed.nj.alert', () => {
  // do something...
  });
  document.querySelector('.my-alert').addEventListener('close.nj.alert', () => {
  // do something...
  })