Yammer Teams Slack email

Alert

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

Example

<nj-alert>
  <div class="nj-alert nj-alert--primary" role="alert">
    <i class="material-icons nj-alert__icon">notification_important</i>
    <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>
</nj-alert>
Use only the tag <nj-alert></nj-alert> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.

Theme colors

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

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

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

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

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

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

Dismissing

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

<nj-alert>
  <div class="nj-alert nj-alert--primary" role="alert">
    <button type="button" class="nj-close nj-alert__close" aria-label="Close">
      <i class="material-icons nj-alert__close-icon">close</i>
    </button>
    <i class="material-icons nj-alert__icon">notification_important</i>
    <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>
</nj-alert>

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...
})