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 vertical, horizontal, and grid layouts. Built from a group of Actions, the Action Bar handles properties like positioning, light/dark modes, and expansion controls.

Action Bar was created to be placed on the edges of an interface. For a floating group of Actions, enable the floating property. To prevent the automatic overflowing of Actions when there is limited space, enable the overflowActionsDisabled property.

When using Action Bar, its parent should use the CSS Flexbox layout, like so:

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

Writing and copy

Refer to Action for writing and copy guidelines.

API reference

Properties

Slots

Styles

Events

Methods