Notifications inform users about
the results of an action.

The different variants provide immediate feedback as to the results of an action, allowing people to understand the status of the system.

Notifications should be used to give users immediate, non-critical feedback on the outcome or status of an action.

Examples include:

  • Successful form submission
  • Important documents have been added to the user's account, ready for them to view
  • A change in tariff has not completed successfully
  • Information seems to be out of date
  • The OVO products have planned maintenance and down-time soon

Do not use this component:

  • If the message is critical, or requires the user to take an action. Consider using the Alert component instead.
  • If the message relates to form field validation which has related errors. Use the ErrorSummary component instead.

Availabile platforms




Web (@ovotech/element)

App (@ovotech/element-native)

How to use it

Choosing a notification type

There are four types of notifications:

  • Info — use this to notification to give users additional information that might not be linked to the action that they're currently taking.
  • Success — use this notification to let the user know that an action has been completed as expected.
  • Warning — use this notification to let the user know that their action might have undesirable or unexpected results.
  • Error — use this notification to let the user know that their action produced an error or critical failure.


Storybook failed to load. Please connect to the VPN to access.

Writing messages

  • Describe what went wrong and what the user should do next
  • Not everyone can see the colour of the component; write clear status messages that stand alone

Making it dismissable

Notifications can be made dismissable. Don't do this if the notification includes an action vital for the page.

Ref to 612:9217

Ref to 612:9217

Using it accessibly

  • Ensure the keyboard focus is moved to a notification if it appears as a result of user action





(required only for Web)







error success info warning






Callback after a notification has been dismissed



Remove the default margin that appears at bottom of the notification when it is displayed



Spread to outer most div - the 'focus wrapper'



Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

  • As someone using the component, I want to be able to quickly understand the purpose of the notification from it's heading.
  • As someone with a colour vision deficiency, I want to be able to read all the content, regardless of the colour used to display text.
  • As a screen reader user, I want the notification to be announced as it becomes present.

Test steps

Use these steps to check that the Notification component has been implemented correctly:

  1. Turn on a screen reader.
  2. Trigger the notification to appear and verify that it is announced by the screen reader.
  3. Verify that the notification's title is announced as a heading.

Known defects

We're aware of the following defects and have provided ways that these can be manually resolved, until this component is updated:

  • The title for the notification should be marked up as a heading. Where possible use a heading level 2 element (<h2>) for the notification's title.
  • When using the warning variant of the Notification, hovered links have an insufficient colour contrast ratio, making them difficult to perceive. Where possible, add CSS to make the hovered link text colour darker, consistent with the way that the TextLink component works.

Related components

Related patterns

External links