Action Bar is composed of Actions which are typically used for core operations in the interface.
Overview
The design of Action Bar accommodates actions in a vertical layout. Built from a group of Actions, the Action Bar handles props like positioning, light/dark modes, and expansion controls.
Action Bar was created to be placed on the left or right edge of the interface. For a floating group of Actions, please consider Action Pad.
When using Action Bar, its parent should use the CSS Flexbox layout, like so:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
}Usage
- Core functions and menus in an application
- Toolbar for the interface
- Set of Actions in a focused view
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Presses the selected calcite-action. |
Enter | Presses the selected calcite-action. |
Tab | Move focus to next non-disabled calcite-action. If the currently focused step is the last step, the focus will leave the component. |
Tab and Shift | Move focus to previous non-disabled calcite-action. If the currently focused step is the first step, the focus will leave the component. |
Writing and copy
Refer to Action for writing and copy guidelines.