Version
has been released! Read the upgrade guide

Notifications

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

A component to easily alert users to new notifications.

Overview

The Notification Component provides an easy way to message the user when an action that is relevant to them happens within an application.

1Usage

Only one Notification component should be used per page. It should exist in a fixed location throughout the application, in either the Sidebar or the Masthead.

2Anatomy

The Notification component has two main sections - the Trigger and the main Notification Sheet.

  1. Container. The container wraps the entire notification sheet. By default it is hidden.

  2. Trigger. The Trigger is the only part of the Notification Component that is visible by default. Clicking on it will trigger the Notification Sheet.

  3. Notifications. Each Notification provides an overview of the action involving the user.

  4. All Notifications. This link will navigate the user to a Notification screen.

3Sizing & Spacing

The Notification is only available in 1 size. It is tied into the Masthead and the Sidebar, so cannot be used independently of these components.

4States

The Notification Component has two states: hidden and visible. By default, the Notification Sheet is hidden - clicking on the Trigger will make the sheet appear besides the bell icon.

5Hierarchy & Placement

The Notification Sheet should only be used in the Sidebar or Masthead.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright