Notification message

<div class="ds_notification-message" aria-live="polite" data-module="ds-notification-message">
    <svg class="ds_notification-message__icon  ds_icon  ds_icon--24" aria-hidden="true" role="img">
        <use href="/assets/images/icons/icons.stack.svg#check_circle"></use>
    </svg>
    <h3 class="ds_notification-message__title">
        Tenant added successfully
    </h3>
    <div class="ds_notification-message__body">
        <p>You have added a tenant to the application. Go to the <a href="#">tenant list</a> to view all tenants.</p>
    </div>
    <button class="ds_notification-message__close  js-close-notification-message" type="button">
        <span class="visually-hidden">Close this notification</span>
	<svg class="ds_icon  ds_icon--fill" aria-hidden="true" role="img">
	    <use href="/assets/images/icons/icons.stack.svg#close"></use>
	</svg>
    </button>
</div>

About this component

Use a notification to give users:

• updates about a system or a service
• feedback on their actions
• information about an action that they need to take

There are four types of notification:

• confirmation
• error
• information
• warning

The notification has a:

• heading
• short text summary 
• icon 
• coloured border on the left
• close (‘X’) button – this is optional 

Notifications can be dismissible, if needed. Users can dismiss a notification by using the Close button.

When to use this component

Use a notification message if you need to give:

• information that’s relevant at a specific point in a user’s journey 
• feedback about the user’s action on a page, screen or form

Use a notification banner to announce key information across all pages of a website or all screens of an app.

When to use a confirmation notification

Use a confirmation notification to tell users they've completed an action.

For example, tell users they’ve successfully:

• added information
• deleted information
• changed information

<div class="ds_notification-message  ds_notification-message--success" aria-live="polite" data-module="ds-notification-message">
    <svg class="ds_notification-message__icon  ds_icon  ds_icon--24" aria-hidden="true" role="img">
        <use href="/assets/images/icons/icons.stack.svg#check_circle"></use>
    </svg>
    <h3 class="ds_notification-message__title">
        Landlord removed successfully
    </h3>
    <div class="ds_notification-message__body">
        <p>You have removed the landlord <strong>John Smith</strong> from your application.</p>
    </div>
</div>

When to use a confirmation notification versus a notification panel

Use a confirmation notification to let the user know that an action or event has been completed successfully. 

Use a notification panel in a form submission results page at the end of a form to tell users they’ve successfully submitted a form.

When to use an error notification

Use an error notification to tell users about a problem they need to fix. 

<div class="ds_notification-message  ds_notification-message--error" aria-live="polite" data-module="ds-notification-message">
    <svg class="ds_notification-message__icon  ds_icon  ds_icon--24" aria-hidden="true" role="img">
        <use href="/assets/images/icons/icons.stack.svg#error"></use>
    </svg>
    <h3 class="ds_notification-message__title">
        Something went wrong
    </h3>
    <div class="ds_notification-message__body">
        <p>That link does not seem to be working.<br>Please try again.</p>
    </div>
</div>

When to use an error notification versus an error message or error summary

Use an error notification if there is a critical issue users must be aware of.

For example, use an error notification if a user is unable to submit their changes in Settings because of a lost internet connection. 

Only use an error message along with an error summary in a form to tell users there's a problem about an answer they've given. 

When to use an information notification

Use an information notification to tell users about an important change in a service. 

For example, you can tell users:

• contextual information about the service they’re using
• a new way of applying for a service is launching soon 
• upcoming maintenance will take the service offline temporarily

<div class="ds_notification-message  ds_notification-message--info" aria-live="polite" data-module="ds-notification-message">
    <svg class="ds_notification-message__icon  ds_icon  ds_icon--24" aria-hidden="true" role="img">
        <use href="/assets/images/icons/icons.stack.svg#info"></use>
    </svg>
    <h3 class="ds_notification-message__title">
        Welcome to the mygov.scot app
    </h3>
    <div class="ds_notification-message__body">
        <p>This is a beta version. Not all features will be available.</p>
    </div>
</div>

When to use an information notification versus inset text component

Use an information notification to tell users relevant contextual information. The information notification is more visually prominent than inset text.

Use inset text to highlight a block of text from the content that surrounds it.

When to use a warning notification

Use the warning notification to:

• help users avoid potential errors
• alert users to an issue that may require action

For example, use it: 

• to warn users about information they’ve entered that may cause issues, such as a partial name match when making a payment
• to give users urgent alerts, for example a severe weather warning

<div class="ds_notification-message  ds_notification-message--warning" aria-live="polite" data-module="ds-notification-message">
    <svg class="ds_notification-message__icon  ds_icon  ds_icon--24" aria-hidden="true" role="img">
        <use href="/assets/images/icons/icons.stack.svg#warning"></use>
    </svg>
    <h3 class="ds_notification-message__title">
        Partial name match
    </h3>
    <div class="ds_notification-message__body">
        <p>Please confirm that the name on the account is correct.</p>
    </div>
</div>

When to use a warning notification versus warning text component

Use a warning notification to alert users to potential issues as they move through a form or an app.

Use the warning text component to warn users about something important in the content. For example, you can use warning text to tell users about legal consequences if they do not take an action by a certain date. 

How to use this component

If you want to let the user dismiss the notification from the page, add an ‘X’ as a Close button. Use caution when making messages dismissible if they are important for the user’s context. 

Use the relevant icon and matching border colour to indicate the type of notification (for example, orange triangle icon and orange border for warning). Do not use other colours or icons.

Use notifications sparingly – only when required. Notifications should be related to the user’s tasks or updates about a service.

Notification headings should clearly indicate what the issue is, so that the user can take action if required. 

The message must be concise and easy to understand. It should tell users in plain English what’s happened, and how to fix any issues. 

Text should be no longer than 2 lines and can contain links. 

Place the notification above other page elements. Usually, the notification will appear at the top of the page, below the H1.

Accessibility

Announce the notification to assistive technology users who might not see it being added to a screen.

The links and Close button in a notification message must each have their own focus target. 

Give the notification a suitable aria-live attribute.

Evidence

The confirmation notification was tested with users as part of a prototype of the ‘add more fields’ pattern.

Users understood the purpose of the notification. They noticed it confirmed they’d deleted information on a form.

Website analytics

To understand user behaviour, clicks on links in notifications and interactions with the notification close button can be tracked through:

• the original page path
• the selected URL (also known as ‘click URL’)
• the selected text (also known as ‘click text’)
• a data attribute showing the interaction

The Design System’s ‘tracking’ script automatically adds the data attribute. 

You can use Element Visibility triggers in Google Tag Manager if you need to gather trends data on how many times notifications were shown compared to link clicks or notification closes.

Tracking attributes

Links in notification message components get a data-navigation attribute of [notificationtype-notificationname]-link. The ‘notificationtype’ part allows you to distinguish between confirmation, error, warning or information notifications.

Close buttons in notification get a data-button attribute. Its value uses the pattern button-[notificationtype-notificationname]-close. ‘notificationname’ is either the:

• ID of the notification
• one-based index of the notification, if it does not have an ID