Modal

The Modal component lets you show important, additional content in an overlay.

Overview Properties Usage

When to use

When users need to confirm critical actions or acknowledge key information.
For short, focused tasks that are part of what the user is already doing, such as sharing a document.
To show additional details or previews that are relevant to the user's current task, but don't fit on the main page.

When not to use

For tasks that can happen directly on the main page without the need for a separate, focused step.
For information that can be shown in a simpler, less disruptive way. Consider using InformationOverlay instead.
For complex forms or large amounts of information. Use a dedicated page instead.
For temporary messages or notifications. Use Toast instead.

Content guidelines

Modal content elements

Title (required)
Details (required)
Actions (optional)

General

Use sentence case (only capitalize the first word and names).
Don't use exclamation marks.
Don't format file names (no quotation marks, parentheses, bold, italics, or all caps).

Title

Don't use end punctuation in titles (no periods, exclamation marks, or question marks).

Details

Punctuate any sentences with a period at the end.
For confirmation-type modals: Use a full sentence to explain the impact of the action.

Actions

Some modals include actions for the user to complete.

For confirmation-type modals, the words in the confirmation button should mirror key words in the title. Example: if the title is "Discard changes", write "Discard changes" in the confirmation button as well. If the title is "Delete File123", the confirmation button would say "Delete".

Confirmation modals

Below are reusable texts for confirmation-type modals. Replace the words in brackets [] with the item, file, or owner name for your use case. For example: "Delete [item/file name]" could become "Delete notebook123".