Header Toolbar

Use the header toolbar for the following global actions:

• Global Edit, which switches the whole page to edit mode
• Delete, which deletes the object currently being displayed
• Actions that navigate to a different page or app
• Actions that control the page settings
• Generic actions, such as Share and Favorite

Use the footer toolbar for closing or finalizing actions such as:

• Submit
• Save and Cancel
• Approve and Reject actions for an object

Tip: For more information, see footer toolbar.

Local Actions

Always place local actions in a table row, on the toolbar, or on the chart toolbar, depending on the use case.

Table Toolbar

Use the table toolbar for the following local actions:

• Adding a new line item to a table.
• Editing or deleting selected items in a table.
• Switching the table to edit mode.
• Controlling the table settings, such as filter, views, or analysis.

For more information, see table toolbar.

If a user selects multiple items in a table, the actions that are not valid for this selection should be disabled.

Table Row

If an action affects only a single line or single field of a table, place the action in the table row. When placing actions in a table row, apply the following general rules:

• Only place an action in the table row if there is a substantial use case.
• Offer only one action per row (the most important).
• Place actions that affect an entire table row into the last column of the table.
• Place actions that affect an individual field as close to that field as possible.

Use the table row for the following local actions:

• Navigating to a detailed view of a line item
• Deleting items (in edit mode)
• Editing a row directly (input fields on edit mode)
• Enabling a toggle between two states (switch control)
• Switching between multiple states (select control)

For more information about actions in table rows, see responsive table.

Chart Toolbar

Place the following local actions in the chart toolbar:

• Perspective switch for charts
• View switch to change between chart and table view, or between different chart types
• Standard actions such as legend toggle, the personalization menu, and full screen mode
• App-specific actions

For more information, see chart toolbar.

Enable page actions such as Email or Print. If the use case doesn’t require them, don’t offer the actions at all.

Enable Delete on a table toolbar, even if the selection contains some items which may not be deleted by the user. In this case, inform the user with a pop-up message before the operation starts or, depending on the use case, after it is completed. For example, “X of Y items cannot be deleted due to…”.

Enable actions even if they can only be performed on another page, or subsection of the same page. Include a pop-up message that clarifies where and how to fully enable the action. This supports cases in which the enabling option cannot be placed close enough to the action.

Examples:

Disable Copy on a table toolbar if nothing is selected.

Hide finalizing actions in edit and partial edit modes. Finalizing actions include Accept, Reject, Save, Cancel, and Share.

Hide Delete on a table toolbar if the table cannot contain deletable items at all, for example, due to an app-specific filter settings. However, you should disable Delete on a table toolbar if the table generally contains items which can be deleted, but which are only currently not deletable due to a user filter setting, for example.

Hide actions which are not available in the current state. For example:

• Hide Delete on a page in undeletable state such as Send.
• Hide Delete as line-item action from an undeletable line item.

Do not show/hide actions dynamically at runtime in a current mode.