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.