Notification - Usage
Basic Guidelines
Notification does not time out automatically (unlike Toast) and needs to be dismissed by the user (or automatically dismissed by a user taking an action). It appears below the masthead, pushing all other content down.
Any link within the content must be underlined as described in Foundations to meet accessibility requirements.
Behaviour
Notification has the default role of ‘status’ which means if the component is shown it will be read out at the next possible opportunity, regardless of the screen-readers position on the page. This is different to the Toast component which screen readers will skip entirely.
Variants Usage
Success and Error are the only two variants of Notification at present.
Success is used to show a confirmation of a task, or an update to the user’s account, of which the user needs to be made aware of (i.e. Toast cannot be used in this scenario because it times out). Notifications should not be used for page-specific actions such as an item being added to basket.
The Error Notification should be used when there is a problem that requires the users immediate attention such as an account issue or unsuccessful action. If a link is needed to rectify an issue it should be underlined. If user needs to take action, then the dismiss icon can be turned off.
Content Guidance
On Desktop the content of the Notification should not exceed one line and on Mobile it should not exceed three lines. These rules limit the content to about 40—70 characters (including spaces), depending on whether the Icon and Dismiss Button are turned on.
It’s possible to emphasise words using the medium font weight.
Positioning
Notification sits below the masthead pushing all content down that sits below it. The component spans the full viewport on all devices, the content sat within the margins of the page.
Depending on the importance of the Notification content to the user, the Notification can be set to stick to the top of the viewport, to keep it visible when scrolling down.
On page load, Notification will push all content below masthead down.
If suitable, the Notification can be set to stick to the top of the viewport as the user scrolls down the page.
On page load, Notification will push all content below masthead down. This example is downscaled to fit into the documentation.
If suitable, the Notification can be set to stick to the top of the viewport as the user scrolls down the page. This example is downscaled to fit into the documentation.
Colour Usage
Do not change the icon or background colour
Both Notification variants have a set icon and background colour associated with them. The icon can be turned off if more space is needed, but it cannot be changed.
