office-ui-fabric-react/src/components/Button/docs/new/ButtonBestPractices.md

Reusable React components for building experiences for Office 365.

### Layout

- For dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the container.
- For single-page forms and focused tasks, left-align buttons with the container.
- Always place the primary button on the left, the secondary button just to the right of it.
- Show only one primary button that inherits theme color at rest state. If there are more than two buttons with equal priority, all buttons should have neutral backgrounds.
- Don't use a button to navigate to another place; use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.
- Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (i.e. "Save") or cancels the action (i.e. "Cancel").

### Content

- Use sentence-style capitalization—only capitalize the first word in a sentence, and proper nouns.
- Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb is best. Include a noun if there is any room for interpretation about what the verb means. For example, "Delete folder" or "Create account".