Notifications

Attention-grabbing and non-dismissable component that allows for extended, richly formatted body content.

Notifications display within the page content, and are not free-floating like a snackbar. For complete usage guidelines, visit Unifi Messaging Guidelines.

Basic Notification

Notifications must include an .u-notification__icon, and content can be placed within .u-notification__message.

Note: It is recommended to include aria-label on div.u-notification__icon with a short label for clarity, ex: aria-label="Error", unless this would be repetitive of the Notification content.

<div>
  <div class="u-notification">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Image Title</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
          </svg>
        </span>
        We wanted to make you aware of this information.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--success u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Success Image</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
          </svg>
        </span>
        This process has been completed successfully.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--info u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Info Image</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
          </svg>
        </span>
        You may find this information useful.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--warning u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Warning Image</title>
            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
          </svg>
        </span>
        This item needs your attention, but it's not an error.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--error u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Error Image</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
          </svg>
        </span>
        <strong>Notification Heading</strong>
      </p>
      <p>It looks like you may have some missing or invalid information.</p>
    </div>
  </div>
</div>

<div>
  <div class="u-notification">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Image Title</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
          </svg>
        </span>
        We wanted to make you aware of this information.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--success u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Success Image</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
          </svg>
        </span>
        This process has been completed successfully.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--info u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Info Image</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
          </svg>
        </span>
        You may find this information useful.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--warning u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Warning Image</title>
            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
          </svg>
        </span>
        This item needs your attention, but it's not an error.
      </p>
    </div>
  </div>
  <div class="u-notification u-notification--error u-mt-xs-3">
    <div class="u-notification__message">
      <p class="u-notification__icon-line">
        <span class="u-notification__icon">
          <svg focusable="false" viewBox="0 0 24 24" role="img">
            <title>Error Image</title>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
          </svg>
        </span>
        <strong>Notification Heading</strong>
      </p>
      <p>It looks like you may have some missing or invalid information.</p>
    </div>
  </div>
</div>

Notifications

Basic Notification

Properties

<Notification />