Component

Notification

Notifications are messages that communicate information to the user.

Inline Notification

Vanilla JS

ReactAngularVueCodePen
<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div data-notification class="bx--inline-notification bx--inline-notification--info" role="alert">
  <div class="bx--inline-notification__details">
      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1-3V7H7v6h2zM8 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
      </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
  <div class="bx--inline-notification__details">
      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM3.293 4.707l8 8 1.414-1.414-8-8-1.414 1.414z" fill-rule="evenodd" />
      </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--inline-notification bx--inline-notification--success" role="alert">
  <div class="bx--inline-notification__details">
      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.293-11.332L6.75 9.21 4.707 7.168 3.293 8.582 6.75 12.04l5.957-5.957-1.414-1.414z"></path>
      </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Our goal is to become better at our craft and raise our collective knowledge by sharing experiences, best practices, what we have recently learned or what we are working on.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
  <div class="bx--inline-notification__details">
      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M.75 16a.75.75 0 0 1-.67-1.085L7.33.415a.75.75 0 0 1 1.34 0l7.25 14.5A.75.75 0 0 1 15.25 16H.75zm6.5-10v5h1.5V6h-1.5zM8 13.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0 1.5z"></path>
      </svg>
    <div class="bx--inline-notification__text-wrapper">
      <p class="bx--inline-notification__title">Notification title</p>
      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
    </div>
  </div>
  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>

Toast Notification

Vanilla JS

ReactAngularVueCodePen
<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div data-notification class="bx--toast-notification bx--toast-notification--info" role="alert">
  <div class="bx--toast-notification__details">
    <h3 class="bx--toast-notification__title">Notification title</h3>
    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
  </div>
  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
  <div class="bx--toast-notification__details">
    <h3 class="bx--toast-notification__title">Notification title</h3>
    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
  </div>
  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--toast-notification bx--toast-notification--success" role="alert">
  <div class="bx--toast-notification__details">
    <h3 class="bx--toast-notification__title">Notification title</h3>
    <p class="bx--toast-notification__subtitle">Our goal is to become better at our craft and raise our collective knowledge by sharing experiences, best practices, what we have recently learned or what we are working on.</p>
    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
  </div>
  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>
<div data-notification class="bx--toast-notification bx--toast-notification--warning" role="alert">
  <div class="bx--toast-notification__details">
    <h3 class="bx--toast-notification__title">Notification title</h3>
    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
  </div>
  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
  </button>
</div>

Documentation

SCSS

Mixins

Name Params Description
inline-notification--color $color: String Applies given $color to border and icon
notification--color $color: String Applies given $color to left border

Modifiers

Use these modifiers with .bx--inline-notification class.

Selector Description
.bx--inline-notification--error Apply error color to border and icon
.bx--inline-notification--success Apply success color to border and icon
.bx--inline-notification--info Apply info color to border and icon
.bx--inline-notification--warning Apply warning color to border and icon

Use these modifiers with .bx--toast-notification class.

Selector Description
.bx--toast-notification--error Apply error color on left border
.bx--toast-notification--success Apply success color on left border
.bx--toast-notification--info Apply info color on left border
.bx--toast-notification--warning Apply warning color on left border

JavaScript

Getting component class reference

ES2015
import { Notification } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var Notification = CarbonComponents.Notification;

Instantiating

// `#my-notification` is an element with `[data-notification]` attribute
Notification.create(document.getElementById('my-notification'));

Public Methods

Name Params Description
remove Removes the component, deletes the instance, and removes document event listeners
release Delete the instance
Example - Removing a notification
// `#my-notification` is an element with `[data-notification]` attribute
notificationInstance = Notification.create(document.getElementById('my-notification'));
notificationInstance.remove();

Options

Option Default Selector Description
selectorInit [data-notification] The selector to find instances of the component
selectorButton [data-notification-btn] The selector to find the close button in the component
eventBeforeDeleteNotification notification-before-delete Event before deleting the notification
eventAfterDeleteNotification notification-after-delete Event after deleting the notification
Example - Preventing a notification from being removed in a certain condition
document.addEventListener('notification-before-delete', function(evt) {
  if (!myApplication.shouldNotificationBeRemoved(evt.target)) {
    evt.preventDefault();
  }
});
Example - Notifying events of all notifications being removed to an analytics library
document.addEventListener('notification-after-delete', function(evt) {
  myAnalyticsLibrary.send({
    action: 'Notification removed',
    id: evt.target.id,
  });
});

FAQ

Using aria live regions and alert roles

Using role="alert" is an aggressive call to action that the prompts a screen reader user to take immediate action on something that changed in the UI. This is usually reserved for things that are important or time-sensitive like:

  • An invalid value was entered into a form field
  • The user's login session is about to expire
  • The connection to the server was lost, local changes will not be saved

Use the alert role sparingly and only in situations where the user's immediate attention is required. Dynamic changes that are less urgent should use a less aggressive method, such as aria-live="polite" or other live region roles.

Don't use an alert role on all notifications.

By default, we recommend that error and warning notifications use role="alert", while success and info notifications use aria-live="polite". But as always, this will depend on the urgency of the notification.

Sources: