Skip to main content

Modal

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

OverviewPropertiesUsage

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​

Anatomy of a Modal with three numbered callouts mapping to the parts described below: Title, Details, and Actions. Anatomy of a Modal with three numbered callouts mapping to the parts described below: Title, Details, and Actions.

  1. Title (required)
  2. Details (required)
  3. Actions (optional)

General guidelines​

  • Use sentence case (capitalize only the first word and any proper nouns, such as brand 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".

Discard changes​

Reusable Modal text for discarding changes: title "Discard changes", details "You'll lose your unsaved changes.", and actions "Cancel" and "Discard changes". Reusable Modal text for discarding changes: title "Discard changes", details "You'll lose your unsaved changes.", and actions "Cancel" and "Discard changes". Two incorrect Modal texts for discarding changes: one titled "Discard changes?" paired with a generic "Ok" action, and one with the wordy title "Are you sure you want to discard your changes?". Two incorrect Modal texts for discarding changes: one titled "Discard changes?" paired with a generic "Ok" action, and one with the wordy title "Are you sure you want to discard your changes?".

Delete permanently​

Reusable Modal text for deleting an item: title "Delete [item/file name]", details "You're about to permanently delete [item/file name]", and actions "Cancel" and "Delete". Reusable Modal text for deleting an item: title "Delete [item/file name]", details "You're about to permanently delete [item/file name]", and actions "Cancel" and "Delete". Two incorrect Modal texts for deleting an item: one with a generic "Confirm" action, and one with the wordy title "Are you sure you want to delete [item/file name]?". Two incorrect Modal texts for deleting an item: one with a generic "Confirm" action, and one with the wordy title "Are you sure you want to delete [item/file name]?".

Change document owner​

From within the document​

Example of a correct "Change owner" Modal with a matching "Change owner" title and action, versus an incorrect one using a "Transfer ownership?" punctuated title. Example of a correct "Change owner" Modal with a matching "Change owner" title and action, versus an incorrect one using a "Transfer ownership?" punctuated title.

From within a document manager - single document​

Example of a correct "Change owner" Modal with a matching action, versus an incorrect wordy title "Are you sure you want to change the owner?". Example of a correct "Change owner" Modal with a matching action, versus an incorrect wordy title "Are you sure you want to change the owner?".

From within a document manager - multiple documents​

Example of a correct "Change owner" Modal for three selected documents, listing each file and its current owner in a table before the action "Change owner". Example of a correct "Change owner" Modal for three selected documents, listing each file and its current owner in a table before the action "Change owner". Incorrect Modal text titled "Permanently change owner", listing files to transfer as a bullet list instead of a table, with a mismatched "Transfer document" action. Incorrect Modal text titled "Permanently change owner", listing files to transfer as a bullet list instead of a table, with a mismatched "Transfer document" action.

Still have questions?
Find answers in the Dynatrace Community