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

Won't be done

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

Make 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>