Dialog box

Components

Dialog box

This component informs users of a task and may contain critical or simply informative information about something that has happened and that is important for the user to know.

Preview

Figma

Uses

When to use

To focus the user’s attention.

Complete short tasks.

Collect information from the user.

Show relevant information.

When not to use

If the content is not related to the current workflow.

To display large amounts of data or complexes.

When the user has not activated the modal box.

A modal should never activate another modal. If the first modal task depends on a confirmation modal to approve, that first task should not be performed in a modal.

Good practices

Use the manners in moderation. They are harmful and can easily annoy the user if used incorrectly or too often.

The manners must be initiated by the user, for example after clicking on a button. Do not interrupt the user by opening a modal box when they are not waiting for it. Avoid system-generated pop-ups that distract the user while working. Triggers can be a direct or indirect consequence of a user's action. An example of an indirect action is a user closing a tab with unsaved content that then prompts a modal box to ask them if they want to save their changes before closing.

Keep the modal tasks simple. Modal tasks should be straightforward and easy to complete.

Avoid stacking manners on top of each other. Limit the number of interactions in a modal.

Label items with action verbs that indicate what happens when the item is selected.

Behaviour

Variants by content

Only read: Provides the user with information related to the current flow but has no actions that the user should perform

Display of the dialog box with action buttons

With actions :Requires the user to complete actions. It contains a cancel button and a main action button. There should only be one main action per modal.

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 Modal uses role="dialog" and aria-modal="true" to convey to users of supporting technologies that function as native dialog windows.

When a modal is closed, the focus returns to the button that activated it.

The title property is used to display a title in the modal. The modal marks this as the label of the modal when used. This helps screen reader users, making it a mandatory property.

The modal catches the spotlight while it’s open and users can’t navigate out of the modal before it closes.

Pressing esc closes the modal window.

The label of the closing blade is defined through the aria-label-close property which by default has the value "Close".

A través de la propiedad h-size se define la etiqueta de encabezado correspondiente.