Skip to main content

Modal

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

    OverviewPropertiesUsageChangelog

    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