Inline message

Inline message show up in task flows, to notify users of the status of an action or system. They usually appear at the top of the primary content area or close to the item needing attention.

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

React

Vanilla

Figma

Example

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

<div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px;">
  <div class="nj-inline-message">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--error" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>error</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  
  <div class="nj-inline-message nj-inline-message--information">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--information" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>info</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  
  <div class="nj-inline-message nj-inline-message--success">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--success" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>success</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--warning">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--warning" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>warning</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--fatal-error">
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>fatal error</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--inverse">remediation action</a></p>
    </div>
  </div>
</div>

Without Status-indicator

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

<div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px;">
  <div class="nj-inline-message">
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>error</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--information">
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>info</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--success">
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>success</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--warning">
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>warning</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
  </div>
  <div class="nj-inline-message nj-inline-message--fatal-error">
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>fatal error</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--inverse">remediation action</a></p>
    </div>
  </div>
</div>

Closable

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

<div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px;">
  <div class="nj-inline-message">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--error" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>error</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
      <span class="nj-sr-only">Hide message</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--information">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--information" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>info</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
      <span class="nj-sr-only">Hide message</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--success">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--success" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>success</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
      <span class="nj-sr-only">Hide message</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--warning">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--warning" aria-hidden="true">
      <div class="nj-status-indicator__svg"></div>
    </div>
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>warning</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--high-contrast">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--secondary">
      <span class="nj-sr-only">Hide message</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-inline-message nj-inline-message--fatal-error">
    <div class="nj-inline-message__content">
      <h4 class="nj-inline-message__title">Title <b>fatal error</b> Message</h4>
      <p class="nj-inline-message__body">Message description or <a class="nj-link nj-link--inverse">remediation action</a></p>
    </div>
    <button class="nj-inline-message__close nj-icon-btn nj-icon-btn--inverse">
      <span class="nj-sr-only">Hide message</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
</div>

Icon-button

Input