Notification

Inline notification

Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 5a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 16 7zm4 17.12h-8v-2.24h2.88v-6.76H13v-2.24h4.13v9H20z"></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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
    <div class="bx--inline-notification__details">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm3.5 13.5l-8-8 1-1 8 8-1 1z"></path><path d="M13.5 14.5l-8-8 1-1 8 8-1 1z" data-icon-path="inner-path" opacity="0"></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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--inline-notification bx--inline-notification--success" role="alert">
    <div class="bx--inline-notification__details">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-4.9 0-9 4.1-9 9s4.1 9 9 9 9-4 9-9-4-9-9-9zM8.7 13.5l-3.2-3.2 1-1 2.2 2.2 4.8-4.8 1 1-5.8 5.8z"></path><path fill="none" d="M8.7 13.5l-3.2-3.2 1-1 2.2 2.2 4.8-4.8 1 1-5.8 5.8z" data-icon-path="inner-path" opacity="0"></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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
    <div class="bx--inline-notification__details">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm-.8 4h1.5v7H9.2V5zm.8 11c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path><path d="M9.2 5h1.5v7H9.2V5zm.8 11c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" data-icon-path="inner-path" opacity="0"></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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>

Toast notification

Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm3.5 13.5l-8-8 1-1 8 8-1 1z"></path><path d="M13.5 14.5l-8-8 1-1 8 8-1 1z" data-icon-path="inner-path" opacity="0"></path></svg>
    <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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--toast-notification bx--toast-notification--success" role="alert">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-4.9 0-9 4.1-9 9s4.1 9 9 9 9-4 9-9-4-9-9-9zM8.7 13.5l-3.2-3.2 1-1 2.2 2.2 4.8-4.8 1 1-5.8 5.8z"></path><path fill="none" d="M8.7 13.5l-3.2-3.2 1-1 2.2 2.2 4.8-4.8 1 1-5.8 5.8z" data-icon-path="inner-path" opacity="0"></path></svg>
    <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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
    </button>
  </div>
  <div data-notification class="bx--toast-notification bx--toast-notification--warning" role="alert">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm-.8 4h1.5v7H9.2V5zm.8 11c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path><path d="M9.2 5h1.5v7H9.2V5zm.8 11c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" data-icon-path="inner-path" opacity="0"></path></svg>
    <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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toast-notification__close-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></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--low-contrast Use low contrast variant (The color scheme used until v10.2)
.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--low-contrast Use low contrast variant (The color scheme used until v10.2)
.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:

Edit this page on GitHub
Previous
Components: Modal
Next
Notification: Usage