Skip to content

Notification

Notifications notify the user with the status of an action.

Usage

Use notifications to inform users about the result of an action. There are different notifications are available for different results, or use a custom version.

Success Notification

Success

Riding your bike to work has decreased your CO2 emissions!

Info Notification

Info

Each litre of fuel your car uses, euqals 2.5 kilos of CO2 emitted into the atmosphere

Warning Notification

Warning

For long distance travel trains are more sustainable than planes

Error Notification

Oops, there’s a problem…

Consider using your car less

Content

  • Always describe what went wrong and what the user should do next.

Accessibility

  • Always provide a link back to the submit button if the user needs to resubmit a form
  • Ensure the keyboard focus is moved to a notification if it appears as a result of user action
  • Ensure a status message is included in the notification, do not solely rely on the notification colour.

Variations

Dismissable

Notifications can also set to dismiss with the dismissable property.

Consider using your car less

Custom Variant

Notification can be customised in your theme using a variant.

Custom

This is a custom notification

Properties

Notification

NameValuesDefault

id (required)

String

title

ReactNode

variant

errorsuccessinfowarning

info

dismissable

Boolean

false

onDismissCallback after a notification has been dismissed

Function

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

Boolean

...Spread to outer most div - the 'focus wrapper'

JSX.IntrinsicElements["div"]

ErrorNotification

In addition to Notification properties, ErrorNotification has a preset title.

NameValuesDefault

title

ReactNode

Oops, there's a problem...

...Spread to outer most div - the 'focus wrapper'

JSX.IntrinsicElements["div"]

Tokens