Action Bar | Calcite Design System

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:

Use dark colors for code blocksCopy
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
}

Sample

Usage

Core functions and menus in an application
Toolbar for the interface
Set of Actions in a focused view

Text display behavior

In Action Bar, text visibility is controlled by both the Action Bar component and its child Action components.

Action Bar's expanded property toggles textEnabled for all child Actions
On initial load, Action's textEnabled property determines whether an Action’s text is shown when the Action Bar is not expanded

The component only updates child textEnabled values when the expanded state is toggled. The Action Bar does not automatically manage textEnabled on initial render or when Actions are added dynamically, rather textEnabled should be set on each Action as needed.

When the Action Bar is not expanded, only Actions with textEnabled will display text, allowing for mixed configurations of labeled and icon-only Actions.

Accessibility

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.

API reference

Properties

Property	Attribute	Description	Type	Default
actionsEndGroupLabel	actions-end-group-label	Specifies an accessible name for the last `calcite-action-group`.	`string \| undefined`
actionsStartGroupLabel	actions-start-group-label	Specifies an accessible name for the first `calcite-action-group`.	`string \| undefined`
expandDisabled	expand-disabled	When `true`, the expand-toggling behavior is disabled.	`boolean`	`false`
expanded	expanded	When `true`, expands the component and its contents. When a child `calcite-action` specifies `textEnabled` as `true`, its `text` initially displays adjacent to its `icon` regardless of expansion.	`boolean`	`false`
expandPosition	expand-position	Specifies the position of the expand `calcite-action`.	`Extract<"start" \| "end", Position>`	`"end"`
floating	floating	When `true`, the component is in a floating state.	`boolean`	`false`
layout	layout	Specifies the layout direction of the actions.	`Extract<"horizontal" \| "vertical" \| "grid", Layout>`	`"vertical"`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
overflowActionsDisabled	overflow-actions-disabled	When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.	`boolean`	`false`
overlayPositioning	overlay-positioning	Specifies the type of positioning to use for overlaid content, where: `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.	`OverlayPositioning`	`"absolute"`
position	position	When `expandDisabled` is `false`, specifies the expand toggle's chevron direction, where: `"start"` positions the expand toggle's chevron away from the start of the component when `expanded` is `false`, and `"end"` positions the expand toggle's chevron away from the end of the component when `expanded` is `false`. When `expanded` is `true`, the chevron direction is reversed.	`Extract<"start" \| "end", Position> \| undefined`
scale	scale	Specifies the size of the expand `calcite-action`.	`Scale`	`"m"`
selectionAppearance	selection-appearance	Specifies the selection appearance of the component	`Extract<"neutral" \| "highlight", SelectionAppearance>`	`"neutral"`

Slots

Name	Description
default (unnamed)	A slot for adding `calcite-action`s that will appear at the top of the component.
actions-end	A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
actions-start	A slot for adding `calcite-action`s that will appear at the start of the component. When `expandPosition` is `"start"`, actions in this slot will render after the collapse/expand button.
expand-tooltip	A slot to set the `calcite-tooltip` for the expand toggle.

Styles

Name	Description
--calcite-action-bar-background-color	Specifies the component's background color.
--calcite-action-bar-corner-radius	Specifies the component's border radius when `floating` is `true`.
--calcite-action-bar-expanded-max-width	When `layout` is `"vertical"`, specifies the component's maximum width.
--calcite-action-bar-items-space	Specifies the space between slotted components in the component.
--calcite-action-bar-shadow	Specifies the component's shadow when `floating` is `true`.

Events

Name	Description	Behavior
calciteActionBarCollapse	Fires when the component's content area is collapsed.	bubblescomposed
calciteActionBarExpand	Fires when the component's content area is expanded.	bubblescomposed
calciteActionBarToggle	Fires when the `expanded` property is toggled.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component's first focusable element.	`setFocus(options?: FocusOptions): Promise<void>`