Notification

Notifications show success, warning, information or error messages to the users.

Content guidance

Notifications should be clear and concise.

They'll always include some body content, but also also include a heading, as well as a button if there's a specific action you want to encourage the member to take.

If the notification includes a heading, it should be written in sentence case. The heading should be an answer-first summary of the message the notification is conveying.

Don't just use "Something's gone wrong" if we can be specific.

  • Yes: There's a problem with your smart meter

  • No: Something's gone wrong

  • Yes: We're getting your smart meter ready

  • No: Smart meter update

If you can include all the information the user needs in a single line, do so. If you need more content, try to keep it to 2 or 3 sentences. If it's longer than this, consider whether a notification is the right way to get this message to the user.

Clearly explain what the user needs to know. Use the content to expand on, but not repeat, the heading.

If the notification is about a problem with their account, tell the user what they can do to fix it or find out more.

Example

Use a button in a notification if there's a specific action you want the user to take. Read the content guidance for buttons.

Variants

A basic info notification

Success state

Inform our members when an action they've taken has been successfully completed and provide helpful context based information around that action.

Error state

Tell users about problems that have occurred after they've taken an action. The error should apply to the whole page.

Warning state

Tell users information that could negatively affect their energy supply, Bulb account balance or finances.

With a heading

With a call to action

With a close handler

If a close handler is provided the CTA will not be rendered