Notice

A notice is an informational and assistive message that appears inline with content.

Preview

Usage

A notice delivers informational and assistive messages that inform the user about product or account statuses and related actions. It can suggest an action or dismissed by the user, though neither are required. For time-based notifications, see Toast.

Variants and Examples

Base Styles

Used in most scenarios when the message should be noticeable but not dominate.

<aside class="d-notice d-notice--base">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Base title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
      <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--info">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Info title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
      <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--error">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Error title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
      <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--success">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Success title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
      <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--warning">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Warning title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
      <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>

Important

Used occasionally in scenarios when the message needs to dominate.

<aside class="d-notice d-notice--base d-notice--important">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Base title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
        <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--info d-notice--important">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Info title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
        <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--error d-notice--important">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Error title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
        <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--success d-notice--important">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Success title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
        <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--warning d-notice--important">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Warning title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
        <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>

Truncate Text

Truncates the text instead of wrapping it. Useful when the Notice needs to have a fixed height.

Vue API

Slots

Name	Description
action	Enter a possible action for the user to take, such as a link to another page
default	the main textual content of the notice
icon	Slot for custom icon
titleOverride	Allows you to override the title, only use this if you need

Props

Name	Description	Default
contentId	Sets an ID on the content element of the component. Useful for aria-describedby or aria-labelledby or any other reason you may need an id to refer to the content. Type: string	undefined
hideAction	Hides the action from the notice Type: boolean Values: truefalse	false
hideClose	Hides the close button from the notice Type: boolean Values: truefalse	false
hideIcon	Hides the icon from the notice Type: boolean Values: truefalse	false
important	Used in scenarios where the message needs to visually dominate the screen. This will also change the aria role from status to alert. Type: boolean Values: truefalse	false
kind	Severity level of the notice, sets the icon and background Type: string Values: baseerrorinfosuccesswarning	'base'
role	Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an important message that does not contain any interactive elements. 'alertdialog' is used to communicate an important message that does contain interactive elements. Type: string Values: alertalertdialogstatus	'status'
title	Title header of the notice. This can be left blank to remove the title from the notice entirely. Type: string	''
titleId	Sets an ID on the title element of the component. Useful for aria-describedby or aria-labelledby or any other reason you may need an id to refer to the title. Type: string	undefined
truncateText	Truncates the content instead of wrapping. Used when the notice needs to have a fixed height. Type: boolean Values: truefalse	false

Events

Name	Description
click	Native button click event Type: PointerEvent \| KeyboardEvent
close	Close button click event

Classes

Class	Applies to	Description

Accessibility

Item	Applies to	Description

Preview

Usage #

Variants and Examples #

Base Styles #

Important #

Truncate Text #

Vue API #

Slots

Props

Events

Classes #

Accessibility #

Usage

Variants and Examples

Base Styles

Important

Truncate Text

Vue API

Classes

Accessibility