Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Notification

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
Image of the notification

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

Display of notification with title
Basic
Display of notification title and description
Description
Display of notification with title, description and link
Description + Link

States

Display of notification by default
Default
Display of informative notification
Info
Warning notification display
Warning
Display of error notification
Error
Display of error notification
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.
NextGenerationEU European Union Funding Logo Transformation and Resiuliency Recovery Plan Logo Spain digital logo Support Accesibility Sitemap Privacy Policy Cookie Policy

This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.