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.
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 toolbars, 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, Footerbar Actions, and Content Actions. More information on each can be found in their respective pages.
Toolbar actions control functions of the content as well as the container. They are represented by action icons. If more than the allowed number is needed, group them in an overflow menu with the “more” icon. The allowed number is dependent on the context.
Toolbars appear in different organisms and follow placement-specific rules.
| Name | Use Case |
|---|---|
| Header toolbar | Actions that affects all applications and the entire user environment. It sits in the header area. |
| Boardlet toolbar | Actions controling a single boardlet and its content. It is always on the top- right side of the boardlet. |
| Ghost boardlet toolbar | It follows the boardlet toolbar rules with one exeption: The first actionbar has only one “More” icon. |
| Card toolbar | Card-specific actions like “Expand/Collapse” if the card supports expand. All other actions are gouped under a “More” icon. |
| Dialog toolbar | It contains actions related to the dialog and follows boardlet behavior. |
| Table row toolbars | Actions that pertain to a single row of a table. They always control functions of the entire row. |
For more information, please go to Toolbar Actions.
The footerbar controls the workflow of the organism they is placed in, usually a boardlet. Actions related to the workflow are always at the bottom of the organism.
The footerbar has a fixed height and must never be multiline. Use only allowed combinations:
For more information, please go to Footerbar Actions.
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.
Content actions exist in three categories.
For more information, please go to Content Actions.
Place actions as close as possible to the content they affect. For example, if an action only effects one items inside a boardlet, consider putting it into a content action rather than a toolbar action.
Keep alignemnt and order of actions inside organisms and toolbars consistent across the application. The same action should be found at the same place across boardlets and dashboards.
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.
For the Footer toolbar, place the primary workflow or finalizing action on the rightmost position. Going right to left, place secondary actions next and then the negative path. When choosing buttons, only use one primary action button per organism, and if possible also page.
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 has actions, it must always include the More action. The second actionbar must not exist without the first.
The buttons follow a hierarchical order. It is important that you create a visual hierarchy between the buttons in your user interface. The hirachie moves linearly from right to left.
There are three types of buttons:
| Type | Definition | Examples | Styling |
|---|---|---|---|
 |
|||
 |
|||
 |
There is only one primary button per group of buttons. There can be multiple secondary and ghost buttons. An actions should retain its type of button throughout the application.
Depending on the context, a group of buttons can have two layouts: horizontal and vertical. Avoid conbining the two within one dashboard. The order for buttons is as follows:
Avoid placing more than three buttons in a button group for visual clarity.
