(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Toolbar Actions
Header toolbar
The header toolbar contains actions that affect all applications or the entire user environment. Primary and secondary actions are distinguished. Primary actions are always be available, while secondary actions might not be present in some dashboards.
Navigation items like the burger menu or breadcrumbs are placed on the left. Form more can be found in [Navigation]. If the datepicker is active, it is also placed in the left toolbar at the armost right position.
Possible actions for the right sidebar include:
| Primary Actions | Secondary Actions |
|---|---|
| Settings | Search |
| Application Name | Notifications |
| Edge.One Wordmark | Home |
Boardlet toolbar
The boardlet toolbar is always on the right side of the boardlet. It controls actions for the boardlet and its content.
The toolbar can exist in two variations:
- The first actionbar containing actions that affect to the boardlet
- The second actionbar containing actions that affect to the content
First Actionbar
Never place more than three actions per toolbar. If it is necessary to place more than three actions in the boardlet, they are grouped and can be found under the "more" icon. Grouping is always done with the help of an overflow menu.
The actions of the toolbar are divided into primary and secondary. Secondary actions are place inside the "More" actions in the form of an Overflow Menu. The number of secondary actions is not limited. But it is recommended not to place more than 8 actions, because otherwise the overflow menu becomes too long. this can disturb the clarity.
Second Actionbar
The second actionbar is always separated from the first actionbar by a dividing line. The second actionbar contains only actions that can be performed on the content of the boardlet, e.g. filtering and sorting the content, search, adding etc. The second actionbar never be used without the first action bar.
Ghost boardlet toolbar
The ghost boardlet toolbar follows the boardlet rules. Alignment and grouping are the same. The only difference is the first actionbar, which contains only a single More icon.
Card toolbar
The placement and rules of actions inside cards depend on the tye of card:
| Type | Action Placement |
|---|---|
| Interactive Card (Collapsed) | The "More" and "Expand/Collapse" actions are placed in the top right. Further actions might be placed on the bottom left. |
| Interactive Card (Expanded) | Only two actions are allowed: "More" and "Expand/Collapse", placed in the top right corner. |
| Mini Card | Up to six actions icons in two roes of three can be placed at the right side of the card. |
| App Card | Up to three action icons ore one action button can be placed at the top-right side. |
| Conflict Card | The only allowed action is "More", placed in the top-right corner. |
| KPI Card | The only allowed action is "More", placed in the top-right corner. |
| Action Chain Card | The only allowed action is "More", placed in the center-right corner. |
Dialog toolbar
The dialog toolbar follows the boardlet rules. It inherits alignment, grouping, and capacity guidance.
If the dialog has a sidebar, place the first actionbar on the outer right of the sidebar. This makes the difference between dialog functions and content functions clear.
Use a visible divider when two actionbars are present. Keep actions right-aligned.
Table row toolbars
Table row toolbars are used in rows of tables. They always control functions of the entire row.
Represent actions with icons. Group additional actions under More when space is limited.
Keep actions right-aligned within the row. Ensure the toolbar reflects row-level scope only.
