Skip to Main Content

Notifications

Notifications are short messages that communicate information to the user. They appear inline to body text or as toast messages.

Interactive component

This is an info notification with a link.
This is an info notification with a link.
This is a success notification with a link.
This is a success notification with a link.
This is a warning notification with a link.
This is a warning notification with a link.
This is a dismissible info notification with a link.
This is a dismissible info notification with a link.
This is a success toast with a link.
This is a success toast with a link.

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular HTML

Angular

Step 1. Install

Execute the following command to install this component.

npm i [NPM-PLACE-HOLDER]/ds-notification
npm i [NPM-PLACE-HOLDER]/ds-toast-notification

Step 2. Import

Import the following into your app.module.ts file.

import { DsNotificationModule } from 'ds-notification';
import { DsToastNotificationModule } from 'ds-toast-notification';

Step 3. Import notification service into your component file 

import { DsNotificationService } from 'ds-notification'; 
import { DsToastNotificationService } from 'ds-toast-notification';

Notifications

info
<cpc-ds-notification [fade]="true"></cpc-ds-notification>
<button (click)="alertService.info('Information notifications provide non-essential, but helpful information. \<a href class=by-keyboard>View Information</a>', 'The item details have been deleted. \<a href class=by-keyboard>Link</a>', options)">Info</button>
success
<cpc-ds-notification [fade]="true"></cpc-ds-notification>
 <button (click)="alertService.success('Success notifications indicate that a user has successfully completed an action.', 'Delivery preference is saved.', options)">Success</button>
warn
<cpc-ds-notification [fade]="true"></cpc-ds-notification>
<button (click)="alertService.warn('Warning notifications provide essential information to prevent users from making an error.', 'The option to make changes is no longer available.', options)">Warning</button>
error
<cpc-ds-notification [fade]="true"></cpc-ds-notification>
<button (click)="alertService.warn('Warning notifications provide essential information to prevent users from making an error.', 'The option to make changes is no longer available.', options)">Warning</button> <button (click)="alertService.error('<p>Error notifications tell users what’s required to successfully complete the action they are trying to complete.</p><div class=inline-links><p><a href class=by-keyboard>View Information</a></p><p><a href class=by-keyboard>View Information</a></p><p><a href class=by-keyboard>View Information</a></p></div>', '<p>Error notifications tell users what’s required to successfully complete the action they are trying to complete.</p><div class=inline-links><p><a href class=by-keyboard>View Information</a></p><p><a href class=by-keyboard>View Information</a></p><p><a href class=by-keyboard>View Information</a></p></div>', options)">Error</button>

Toast Notifications

success
<cpc-ds-toast-notification class="toastContainer" [fade]="true"></cpc-ds-toast-notification>
<button (click)="toastService.success('Success notifications indicate that a user has successfully completed an action.', 'Success notifications <a href class=by-keyboard>View</a>', optionsToast)">Success</button>
error
<cpc-ds-toast-notification class="toastContainer" [fade]="true"></cpc-ds-toast-notification>
<button (click)="toastService.error('Error notifications tell users what’s required to successfully complete the action they are trying to complete.</p><div class=inline-links><p><a href class=by-keyboard>View Information</a></p><p><a href class=by-keyboard>View Information</a></p><p><a href class=by-keyboard>View Information</a></div>', 'Error notifications tell users what’s required to successfully complete the action they are trying to complete. <a href class=by-keyboard>View Information</a>', optionsToast)">Error</button>
Properties
Name Type Default Description
id string  

Button id.
class string primary-button by-keyboard

There are two types of buttons: primary-button and secondary-button
body string  

Button text : for eg: body='button text'
(click) method  

Call the method :
alertService method  

Call the method :

Alert service has 4 methods: 
   info 
   success 
   warn 
   error 

   Each method contains 2 parameters: 
    Notification message 
    Options 

   Options are: 
        showCloseButton
        autoClose
        keepAfterRouteChange
        infoAriaLabel
        successAriaLabel
        warningAriaLabel
        errorAriaLabel
showCloseButton boolean   Show/Hide close button (except Error notification). for eg:- 
options = {
        showCloseButton: true;
        autoClose: false,
        keepAfterRouteChange: false,
        infoAriaLabel: 'Note',
        successAriaLabel: 'Success',
        warningAriaLabel: 'Caution',
        errorAriaLabel: 'Error',
    };
autoClose boolean   Auto-close the notification. Error notification wont auto close for eg:- 
options = {
        showCloseButton: true;
        autoClose: false,
        keepAfterRouteChange: false,
        infoAriaLabel: 'Note',
        successAriaLabel: 'Success',
        warningAriaLabel: 'Caution',
        errorAriaLabel: 'Error',
    };
keepAfterRouteChange boolean   Keep the notification showing even if route changes. for eg:- 
options = {
        showCloseButton: true;
        autoClose: false,
        keepAfterRouteChange: false,
        infoAriaLabel: 'Note',
        successAriaLabel: 'Success',
        warningAriaLabel: 'Caution',
        errorAriaLabel: 'Error',
    };
infoAriaLabel boolean   Aria label text for info notification for eg:- 
options = {
        showCloseButton: true;
        autoClose: false,
        keepAfterRouteChange: false,
        infoAriaLabel: 'Note',
        successAriaLabel: 'Success',
        warningAriaLabel: 'Caution',
        errorAriaLabel: 'Error',
    };
successAriaLabel boolean   Aria label text for success notification for eg:- 
options = {
        showCloseButton: true;
        autoClose: false,
        keepAfterRouteChange: false,
        infoAriaLabel: 'Note',
        successAriaLabel: 'Success',
        warningAriaLabel: 'Caution',
        errorAriaLabel: 'Error',
    };
warningAriaLabel boolean   Aria label text for warning notification for eg:- 
options = {
        showCloseButton: true;
        autoClose: false,
        keepAfterRouteChange: false,
        infoAriaLabel: 'Note',
        successAriaLabel: 'Success',
        warningAriaLabel: 'Caution',
        errorAriaLabel: 'Error',
    };
errorAriaLabel boolean   Aria label text for error notification for eg:- 
options = {
        showCloseButton: true;
        autoClose: false,
        keepAfterRouteChange: false,
        infoAriaLabel: 'Note',
        successAriaLabel: 'Success',
        warningAriaLabel: 'Caution',
        errorAriaLabel: 'Error',
    };

HTML

Step 1: Import CSS

Import the following into your theme or page.

<link type="text/css" href="[CSS-PLACE-HOLDER]" rel="stylesheet">

Step 2: Import JS

Import the following into your theme or page.

<script src="[JS-PLACE-HOLDER]"></script>

Code snippets

Toast Notifications

Success
 <button onclick="createNotification(cssType = 'toast', 
                                            toastType = 'success', 
                                            toastIconAria = 'Success:', 
                                            desktopMessage = 'Delivery preference is saved.', 
                                            mobileMessage = 'Delivery preference is saved.', 
                                            closeButton = true, 
                                            autoClose = true)">Success</button>
Error
<button onclick="createNotification(cssType = 'toast', 
                                            toastType = 'error', 
                                            toastIconAria = 'Error:', 
                                            desktopMessage = 'Error notifications tell users what’s required to successfully complete the action they are trying to complete.', 
                                            mobileMessage = 'Error notifications tell users what’s required to successfully complete the action they are trying to complete.', 
                                            closeButton = true, 
                                            autoClose = false)">Error</button>

Notifications With Close Button

Info
<button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'info', 
                                            toastIconAria = 'Note:', 
                                            desktopMessage = 'Information notifications provide non-essential, but helpful information. <a href=\'#\' class=\'by-keyboard\'>View more</a>', 
                                            mobileMessage = 'The item details have been deleted.', 
                                            closeButton = true, 
                                            autoClose = false)">Info</button>
Success
 <button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'success', 
                                            toastIconAria = 'Success:', 
                                            desktopMessage = 'Success notifications indicate that a user has successfully completed an action.', 
                                            mobileMessage = 'Delivery preference is saved.', 
                                            closeButton = true, 
                                            autoClose = false)">Success</button>
Warning
 <button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'warning', 
                                            toastIconAria = 'Caution:', 
                                            desktopMessage = 'Warning notifications provide essential information to prevent users from making an error.', 
                                            mobileMessage = 'The option to make changes is no longer available.', 
                                            closeButton = true, 
                                            autoClose = false)">Warning</button>
Error
<button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'error', 
                                            toastIconAria = 'Error:', 
                                            desktopMessage = 'Error notifications tell users what’s required to successfully complete the action they are trying to complete.<div class=\'inline-links\'><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p></div>', 
                                            mobileMessage = 'Error notifications tell users what’s required to successfully complete the action they are trying to complete.<div class=\'inline-links\'><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p></div>', 
                                            closeButton = false, 
                                            autoClose = false)">Error</button>

Notifications Without Out Close Button

Info
<button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'info', 
                                            toastIconAria = 'Note:', 
                                            desktopMessage = 'Information notifications provide non-essential, but helpful information. <a href=\'#\' class=\'by-keyboard\'>View more</a>', 
                                            mobileMessage = 'The item details have been deleted.', 
                                            closeButton = false, 
                                            autoClose = false)">Info</button>
Success
<button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'success', 
                                            toastIconAria = 'Success:', 
                                            desktopMessage = 'Success notifications indicate that a user has successfully completed an action.', 
                                            mobileMessage = 'Delivery preference is saved.', 
                                            closeButton = false, 
                                            autoClose = false)">Success</button>
Warning
<button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'warning', 
                                            toastIconAria = 'Caution:', 
                                            desktopMessage = 'Warning notifications provide essential information to prevent users from making an error.', 
                                            mobileMessage = 'The option to make changes is no longer available.', 
                                            closeButton = false, 
                                            autoClose = false)">Warning</button>
Error
<button onclick="createNotification(cssType = 'notification', 
                                            toastType = 'error', 
                                            toastIconAria = 'Error:', 
                                            desktopMessage = 'Error notifications tell users what’s required to successfully complete the action they are trying to complete.</p><div class=\'inline-links\'><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p></div>', 
                                            mobileMessage = 'Error notifications tell users what’s required to successfully complete the action they are trying to complete.</p><div class=\'inline-links\'><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p><p><a href=\'#\' class=\'by-keyboard\'>View more</a></p></div>', 
                                            closeButton = false, 
                                            autoClose = false)">Error</button>

Interaction

Notifications let users know about errors, successes, alerts, and contextual information with minimal distraction, while keeping them on the page.

Notifications can have the following states:
  1. Success notification: This lets the user know that they’ve successful completed a task.
  2. Error notification: This lets the user know that there’s an error that won’t let them complete their task.
  3. Alert notification: This lets the user know about an important condition that can impact their ability to complete a task or to disclose the system’s status.
  4. Neutral / informational notification: This gives the user additional information or lets them know about the system’s status.
Notifications can be persistent, temporary, or dismissed by the user.
  1. Persistent notifications stay on the page until the relevant conditions are met. An example of this is a global error message, which can’t be dismissed by the user.
  2. Temporary notifications stay on the page for a predetermined amount of time. An example of this is a toast message.
  3. User-dismissible notifications stay on the page until the user chooses to hide them. An example of this is a global alert that tells the user that a service isn’t available.

Structure

Notifications should contain:
  • Content communicating the error, next steps, success message, alert or contextual information.
  • Appropriate icon that relates to the context of the notification.
  • Appropriate background colour that relates to the context and easily captures the user’s attention.
General guidelines Dos and don'ts Accessibility considerations

General guidelines

Write notifications using simple, clear language. They should contain content communicating information, a success message, an alert, or an error.

  Guidelines Examples
Recommended length Up to 20 words You’ve successfully verified your identity at Canada Post.
Line wrap Minimize Services will be unavailable from July 14 at 9 p.m. to July 15 at 9 a.m. ET.
Phrasing Complete sentences You’ve already signed up for FlexDelivery, but haven’t verified your identity. You must verify your identity to use FlexDelivery.
Case Sentence case with period You've successfully added a credit card to your profile.

Dos and don’ts

Context

Explain the situation from the user’s point of view. Focus on the issue and not why users are seeing the notification.

  • This tool is locked. You’ll need to sign in to your business account to access all of your tools.
  • System server is not enabling page load.

Error messages

Error messages should appear only when needed. They need to be helpful, relevant, free of jargon and friendly.

  • We couldn’t find this tracking number in our system. Find out why.
  • Tracking number not found.

Accessibility considerations

Alt text for dismissal

The dismiss icon tells users to close the notification. Write alt text for the X symbol.

Dismiss “X” icon

  • Close

Alt text for icons

Notifications contain an appropriate icon that relates to the context. Apply alt text that describes the function of the notification.

Informational “i" icon

  • Additional information
 

Success “✔" icon

  • Success!
 

Alert triangle “!" icon

  • Attention
 

Error circle “!" icon

  • Important

You might also be interested in:

Designers

Typography
Iconography

Developers

Modal windows
Grids
Foundation frameworkOpens in new tab

Writers

Voice and tone
Grammar and mechanics

Code Samples

Basic

Note that this component may require additional styling.

Download package

Angular

Please use download package for complete set of files.
Download package

Guidelines

Focus halo

Notifications have no focus halo of their own. Interactive controls inside the notification body have a prominent focus outline when they're focused or hovered.

Keyboard Interaction

The notification itself isn't interactive. Interactive elements inside the notification should be present in the page tab order.

Links or buttons inside of the notification or toast body should follow their respective keyboard interactions.

Make sure that the notification/toast is immediately next to the triggering element in the DOM order so that a keyboard or screen reader user is easily able to interact with it.

ARIA properties

Notifications and toasts should have the following ARIA properties:

  • The role of “status” and aria-live set to “polite” for info, warning, and success types
  • The role of “alert” and aria-live set to “assertive” for error type

Animation preference settings

Users can choose to turn off a notification’s animation on an operating system or browser level. We respect the user's choice and don't use animations for notifications when users have opted to disable them.

The CSS property prefers-reduced-motion can tell us if the user has opted to turn off animations when its value is “reduce”. In such cases, fly-in and fly-out animations should be disabled.

Testing

When testing notifications, the tester must ensure:

  • The notification is fully keyboard operable
  • The role and aria-live properties are set based on the type of notification
  • The user can interact with the notification on next tab keypress after the trigger element when the notification is actionable
  • The screen reader announces notification role, notification type, and notification content

Related content