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

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.

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

Last updated v5.0.0

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--info">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--info" 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--info">
    <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--info">
    <div class="nj-inline-message__status nj-status-indicator nj-status-indicator--info" 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