Guidelines for Using Dialogs in Fluent UI Blazor

Introduction

Dialogs allow you to open an overlaid window within the browser screen.
They are broadly categorized into dialogs for requesting user input and dialogs for confirming actions or choices, such as alerts or destructive changes like deleting files.

Example of requesting input

Furthermore, they can be classified into two types: modal windows and non-modal windows.

Modal Window

A modal window dims the content behind it. Additionally, clicking the area outside the container closes the modal window.
You can also use the ESC key, or if there is no cancel button in the footer, you can add a close button to the top right of the modal screen.

Non-Modal Window

Non-modal windows have a close button in the top right.
To close a non-modal dialog, you can select the close button, use the ESC key, or select a button in the footer.
In a non-modal dialog, you cannot close the dialog by selecting the area outside of it.

Example of requesting selection or confirmation

While these are not strictly limited to alerts, we will refer to them here as alert dialogs.
Alert dialogs can only be closed by selecting buttons placed in the footer. You cannot place a close button in the top right, nor can you close them using the ESC key.

General Structure of a Dialog

A dialog is divided into three parts:

1. Header: You can place a title and an icon to close the dialog here. The icon for closing the dialog should always be in the top right. The header is mandatory.
2. Body: You describe the content in the body section. The body is optional. You can omit it if the content in the header is sufficient.
3. Footer: You can place up to three buttons. The footer is optional.

Content

Conveying key information in the title

A title is required for a dialog.
You should write a clear and specific sentence.
The title should not be an explanation of the body text.

As a bad example, do not use titles like "Error". It is too generic, and users will not know what to do from the body text. Instead, use a descriptive title such as "The number of characters entered is too long."

Do not use punctuation at the end of the title unless it is a question.

Providing additional context in the body

Use the body content area to provide additional information or explain steps as needed.

Make sure it is not just a restatement of the title.

Button labels in the footer

Use button labels to provide specific responses to the information in the title.
For example, for a title like "Delete this file", you can include buttons labeled "Delete" and "Cancel".
Usually, a single verb is best for labels.
Do not use punctuation for button labels.

Accessibility

Avoid nesting dialogs.
Too many dialogs make it difficult to interact with the content.