Notifications

The notification component is a user interface element that displays brief, informative messages to users. It is typically used to provide feedback or notifications about the status of an action or to display important information.

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

Variations

Dark Themed Notifications

Copy as:HTMLReact

Files deleted

copydone

Files deleted

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

<!-- Component: Basic text dark themed notification with close button -->
<div class="relative flex items-center max-w-full gap-4 px-4 py-3 overflow-hidden text-sm rounded shadow-lg w-80 bg-slate-700 text-slate-200 shadow-slate-500/20 ring-1 ring-inset ring-slate-900" role="status">
  <!-- Text -->
  <p class="flex-1">Files deleted</p>
  <!-- Close button -->
  <button aria-label="Close" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded-full justify-self-center whitespace-nowrap text-slate-200 hover:bg-slate-600 hover:text-slate-100 focus:bg-slate-500 focus:text-slate-100 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-slate-600 disabled:shadow-none disabled:hover:bg-transparent">
    <span class="relative only:-mx-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="graphics-symbol" aria-labelledby="title-20 desc-20">
        <title id="title-20">Icon title</title>
        <desc id="desc-20">A more detailed description of the icon</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </span>
  </button>
</div>
<!-- End Basic text dark themed notification with close button -->

Light Themed Notifications

Copy as:HTMLReact

Files deleted

copydone

Files deleted

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

<!-- Component: Basic text light themed notification with close button -->
<div class="relative flex items-center max-w-full gap-4 px-4 py-3 overflow-hidden text-sm rounded shadow-lg w-80 bg-slate-100 text-slate-700 shadow-slate-500/20 ring-1 ring-inset ring-slate-200" role="status">
  <!-- Text -->
  <p class="flex-1">Files deleted</p>
  <!-- Close button -->
  <button aria-label="Close" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded-full justify-self-center whitespace-nowrap text-slate-500 hover:bg-slate-200 hover:text-slate-600 focus:bg-slate-300 focus:text-slate-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-slate-600 disabled:shadow-none disabled:hover:bg-transparent">
    <span class="relative only:-mx-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="graphics-symbol" aria-labelledby="title-20 desc-20">
        <title id="title-20">Icon title</title>
        <desc id="desc-20">A more detailed description of the icon</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </span>
  </button>
</div>
<!-- End Basic text light themed notification with close button -->

Primary Notifications

Copy as:HTMLReact

Files deleted

copydone

Files deleted

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

<!-- Component: Basic text primary notification with close button -->
<div class="relative flex items-center max-w-full gap-4 px-4 py-3 overflow-hidden text-sm text-white rounded shadow-lg w-80 bg-emerald-500 shadow-emerald-400/20 ring-1 ring-inset ring-emerald-600" role="status">
  <!-- Text -->
  <p class="flex-1">Files deleted</p>
  <!-- Close button -->
  <button aria-label="Close" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded-full justify-self-center whitespace-nowrap hover:bg-emerald-50 focus:bg-emerald-100 hover:text-emerald-600 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-600 disabled:shadow-none disabled:hover:bg-transparent">
    <span class="relative only:-mx-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="graphics-symbol" aria-labelledby="title-20 desc-20">
        <title id="title-20">Icon title</title>
        <desc id="desc-20">A more detailed description of the icon</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </span>
  </button>
</div>
<!-- End Basic text primary notification with close button -->

Secondary Notifications

Copy as:HTMLReact

Files deleted

copydone

Files deleted

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

Retrying in 5 sec

An error occurred. Check your disk space and make sure you have enough space.

copydone

<!-- Component: Basic text secondary notification with close button -->
<div class="relative flex items-center max-w-full gap-4 px-4 py-3 overflow-hidden text-sm rounded shadow-lg w-80 bg-emerald-50 text-emerald-500 shadow-emerald-100 ring-1 ring-inset ring-emerald-100 " role="status">
  <!-- Text -->
  <p class="flex-1">Files deleted</p>
  <!-- Close button -->
  <button aria-label="Close" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide transition duration-300 rounded-full justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 focus:bg-emerald-200 hover:text-emerald-600 focus:text-emerald-700focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-600 disabled:shadow-none disabled:hover:bg-transparent">
    <span class="relative only:-mx-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="graphics-symbol" aria-labelledby="title-20 desc-20">
        <title id="title-20">Icon title</title>
        <desc id="desc-20">A more detailed description of the icon</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </span>
  </button>
</div>
<!-- End Basic text secondary notification with close button -->

Usage

Notifications (or snackbars) inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen and they shouldn’t interrupt the user experience.

Notifications communicate messages that are minimally interruptive and don’t require user action.

Specs

The main elements of the notification component are:

Container: notifications are displayed in rectangular containers (with y padding of 0.75rem and x padding of 1rem). Containers have an opaque background, so that text labels remain legible.
Supporting text: the text can consist of a title and a description (optional) both 0.75rem in font size.
Close button: notifications can be dismissed by the user. The close button is a 2rem x 2rem icon that is placed at the top right corner of the container.
Leading icon: notifications can have a leading icon (optional) that is placed at the top left corner of the container. The icon is 1.25rem x 1.25rem and is centered vertically and horizontally with the notification title.
Action button: notifications can have an action button (optional) that is placed after the text.

Accessibility notes

Notification components are messages that communicate information to a user. The WAI-ARIA role="status" is used to display a message to the user in a way that does not interrupt the user’s current task and queues the notification until whatever task the user is currently working on is complete.

Notifications

Retrying in 5 sec

Variations

Dark Themed Notifications

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Light Themed Notifications

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Primary Notifications

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Secondary Notifications

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Retrying in 5 sec

Usage

Specs

Accessibility notes

Check out the latest release!