Notification

Components

Notification

The toast component is a small pop-up window that is normally displayed in the upper right corner to provide immediate feedback in response to a user action or informing users about a process that the application has performed or will perform. They disappear automatically or can be discarded by the user.

Preview

Figma

Uses

When to use

To provide a temporary notification to the user after an action has been performed, such as sending an email or saving a file.

To display a warning or error message to the user, such as when mandatory fields are missing on a form or when an error occurs when trying to perform an action.

When not to use

You should not use the toast component if you do not need to provide a temporary notification to the user or if there is a more appropriate way to provide the information.

You should avoid using the toasts excessively or annoyingly, as this can be frustrating for the user and may interrupt the task they are performing.

Behaviour

Type

Basic

Description

Description + Link

States

Default

Info

Warning

Error

Success

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The Toast element is the alert component used as a pop-up message.

Hazard and warning alerts have a defined role="alert" that ensures assistive technologies announce them when they appear.

The default and success alert variations have defined a role="status". This ensures that they are read after the hazard and warning alerts.

The alerts also use tabindex="0" to make it possible to access them with the tab key or to move the focus to them by programming.

The closing blade has role="button" in addition to the aria-label property.