Action Bar

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:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
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

KeyFunction
SpacePresses the selected calcite-action.
EnterPresses the selected calcite-action.
TabMove focus to next non-disabled calcite-action. If the currently focused step is the last step, the focus will leave the component.
Tab and ShiftMove 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.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.