Back to Fluentui

DialogBestPractices

packages/react-examples/src/react/Dialog/docs/DialogBestPractices.md

4.40.2-hotfix22.3 KB
Original Source

Layout

  • Don't use more than three buttons.
  • Dialog boxes consist of a header, body, and footer.
  • Validate that people’s entries are acceptable before closing the dialog box. Show an inline validation error near the field they must correct.
  • Blocking dialogs should be used very sparingly, only when it is critical that people make a choice or provide information before they can proceed. Blocking dialogs are generally used for irreversible or potentially destructive tasks. They’re typically paired with an overlay without a light dismiss.

Header

  • Locks to the top of the dialog.
  • May include an icon to the left of the title.
  • Includes a Close button in the top-right corner.

Footer

  • Lock buttons to the bottom of the dialog.
  • Includes one primary button. A secondary button is optional.

Width

  • Maximum is 340 pixels.
  • Minimum is 288 pixels.

Height

  • Maximum is 340 pixels.
  • Minimum is 172 pixels.

Content

Title

  • Keep the title as concise as possible.
  • Don’t use periods at the end of titles.
  • This mandatory content should explain the main information in a clear, concise, and specific statement or question. For example, “Delete this file?” instead of “Are you sure?”
  • The title shouldn’t be a description of the body content. For example, don’t use “Error” as a title. Instead, use an informative statement like “Your session ended.”
  • Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.

Body copy (Optional)

  • Don't restate the title in the body.
  • Use ending punctuation on sentences.
  • Use actionable language, with the most important information at the beginning.
  • Use the optional body content area for additional info or instructions, if needed. Only include information needed to help people make a decision.

Button labels

  • Write button labels that are specific responses to the main information in the title. The title “Delete this file?” could have buttons labeled “Delete” and “Cancel”.
  • Be concise. Limit labels to one or two words. Usually a single verb is best. Include a noun if there is any room for interpretation about what the verb means. For example, “Delete” or “Delete file”.