Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to another dashboard, where the action can be executed, described in detail, or checked further. Actions are displayed in the form of action icons or buttons.
Actions that refer to a content are displayed at the top of the boardlet, next to the title that identifies the object. Actions that relate to the task workflow are located at the bottom right and can be performed after working through the content.
To make actions easier to organise and find, they are usually placed in toolbars. Depending on the content that is affected by the action, different toolbars are available. Within the tool bars, some actions are usually more important than others. Refer to the arrangements in the below examples for better understanding.
Actions are always distinguished from pure navigation. Navigation functions are always on the left, such as Home or Breadcrumbs, while actions in toolbars are aligned on the right.
Actions can be categorized into three groups: Toolbar Actions, Footer Actions, and Content Actions. More information on each can be found in their respective pages.
Toolbar actions are an important part of action placement. They control functions of the content as well as the container. Actions are represented by action icons. If more than the allowed number is needed, group them in an overflow “More” menu.
Toolbars appear in different organisms and follow specific rules. Use the following placements and constraints.
The footerbar controls the workflow of the organism it is placed in. Actions related to the workflow are always at the bottom right of the boardlet.
The footerbar has a fixed height and must never be multiline. Use only the allowed combinations.
Footerbars appear in different organisms and follow further rules.
Content actions are placed directly in freely selectable content. They can appear in the content area of a boardlet, dialog, modal, or free-standing content.
We distinguish three categories.
Place actions as close as possible to the content they affect. Prefer a toolbar or place actions directly in a form or table row when needed. Right-align actions inside toolbars. Keep navigation on the left and actions on the right.
Use a Toolbar action when the function controls the content or its container. This includes boardlets, cards, dialogs, or a whole table row. Use a Footerbar action when the function advances or finalizes the workflow of the organism. Keep to the allowed combinations and the fixed single-line height. Use a Content action when the function belongs inline to a specific field, record, or piece of content.
Follow this order in the Header toolbar. Place business actions first and then content management actions. Place layout management actions next and then generic actions. It is recommended to place the action most important for your business context on the very left within its group. Follow this order in the Footer toolbar. Place the primary workflow or finalizing action on the leftmost position. Place secondary actions next and then the negative path.
Use only one primary action per page. Show a primary action or a semantic danger action, but never both.
Buttons follow a hierarchical order that moves from right to left. Primary actions come first and then danger actions. Secondary actions follow and then negative path actions. Secondary actions can be collapsed into menus to preserve clarity. Use the overflow menu when space is limited.
Do not place more than three actions per boardlet toolbar. Group additional actions under the More action. List grouped actions in an overflow menu. A boardlet must always include the More action. The second actionbar must not exist without the first.