Back to Fluentui

PanelBestPractices

packages/react-examples/src/react/Panel/docs/PanelBestPractices.md

4.40.2-hotfix21.4 KB
Original Source

Layout

  • Use for self-contained experiences where someone doesn’t need to interact with the app view to complete the task.
  • Consider how the panel and its contained contents will scale across responsive web breakpoints.

Header

  • Include a close button in the top-right corner.
  • Lock the title to the top of the panel.
  • The header can contain a variety of components. Components are stacked under the main title, locked to the top, and push content down.

Body

  • The body is a flexible container that can house a wide variety of components, content, and formatting.
  • Content can scroll.

Footer

  • Standard footers include primary and secondary buttons to confirm or cancel the changes or task.
  • Read-only panels may contain a single Close button.
  • Lock the footer to the bottom of the panel.

Content

Title

  • Titles should explain the panel content in clear, concise, and specific terms.
  • Keep the length of the title to one line, if possible.
  • Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.
  • Don’t put a period at the end of the title.

Button labels

  • Be concise. Limit labels to one or two words. Usually a single verb is best. Include a noun if there’s any room for interpretation about what the verb means. For example, “Save” or “Save settings.”