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:

Use dark colors for code blocksCopy
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

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 the accessible label for the last `calcite-action-group`.	`string`
expandDisabled	expand-disabled	When `true`, the expand-toggling behavior is disabled.	`boolean`	`false`
expanded	expanded	When `true`, the component is expanded.	`boolean`	`false`
floating	floating	When `true`, the component is in a floating state.	`boolean`	`false`
layout	layout	Specifies the layout direction of the actions.	`"grid" \| "horizontal" \| "vertical"`	`"vertical"`
messageOverrides		Use this property to override individual strings used by the component.	`{ expand?: string; collapse?: string; expandLabel?: string; collapseLabel?: string; }`
overflowActionsDisabled	overflow-actions-disabled	Disables automatically overflowing `calcite-action`s that won't fit into menus.	`boolean`	`false`
overlayPositioning	overlay-positioning	Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.	`"absolute" \| "fixed"`	`"absolute"`
position	position	Arranges the component depending on the element's `dir` property.	`"end" \| "start"`
scale	scale	Specifies the size of the expand `calcite-action`.	`"l" \| "m" \| "s"`	`"m"`

Slots

Name	Description
default (unnamed)	A slot for adding `calcite-action`s that will appear at the top of the component.
bottom-actions	deprecated Use the `"actions-end"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
actions-end	A slot for adding `calcite-action`s that will appear at the end of the component, prior to 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
calciteActionBarToggle	Fires when the `expanded` property is toggled.	bubblescomposed

Methods

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