Button component in Office UI Fabric
Use buttons in your Office Add-in to enable users to commit changes or complete steps in a task. Make sure that the text of the button communicates the intent of the interaction. Place buttons at the bottom of the UI container of a task pane, dialog, or content pane. For example, use buttons to allow users to submit a form, close a dialog, or to move to the next page.
Example: Buttons in a task pane
Best Practices
| Do | Don't |
|---|---|
| Default buttons should always perform safe operations in add-ins. | Don’t place the default focus on a button that destroys data. Instead, place the focus on the button that performs the safe operation or cancels the action. |
 |
 |
| Use only a single line of text in the label of the button. Keep text to a minimum. | Don’t put anything other than text in a button. |
| Make sure the label conveys a clear purpose of the button to the user. Use concise, specific, self-explanatory labels. Consider using a single word only. | Don’t use buttons for navigation, except for “Back” and “Next” steps. For navigation, consider using a link. |
| Expose only one or two buttons (actions) to the user. For example, “Accept” and “Cancel”. If you need to expose more actions, consider using checkboxes or radio buttons for users to select actions, and provide a single button to start the selected actions. | |
| Style “Submit”, “OK”, and “Apply” buttons as primary buttons. When “Reset” or “Cancel” buttons appear alongside one of these, style them as default buttons. |
Variants
| Variation | Description | Example |
|---|---|---|
| Primary Button | Primary buttons inherit the theme color at rest state. Use primary buttons to highlight the main call to action. |  |
| Default Button | Default buttons should always perform safe operations and should never delete. |  |
| Compound Button | Use compound buttons to cause actions that complete a task, or cause a transitional task. |  |
Implementation
For details, see Button and Getting started with Fabric React code sample.