Action Bar

Calcite Action Bar is a tool group made from the Action component that is 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 expand 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.

Usage

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

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
SpacePress on item
TabMove focus to next non-disabled item. If the currently focused step is the last step, the focus will leave the component
Tab and ShiftMove focus to previous non-disabled item. 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

calcite-action-bar
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
expandDisabledexpand-disabled

When set to true, the expand-toggling behavior will be disabled.

booleanA boolean property should be present, or not
truefalse
expandedexpanded

Indicates whether widget is expanded.

booleanA boolean property should be present, or not
truefalse
intlCollapseintl-collapse

Updates the label of the collapse icon when the component is expanded.

optional
stringA custom string
undefined
intlExpandintl-expand

Updates the label of the expand icon when the component is not expanded.

optional
stringA custom string
undefined
overflowActionsDisabledoverflow-actions-disabled

Disables automatically overflowing actions that won't fit into menus.

booleanA boolean property should be present, or not
truefalse
positionposition

Arranges the component depending on the elements 'dir' property.

typedChoose from a set of typed values
endstart
scalescale

Specifies the size of the expand action.

typedChoose from a set of typed values
lms

Events

NameDescriptionDetail
calciteActionBarToggle

Emitted when expanded has been toggled.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus(focusId?: "expand-toggle") => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-action`s that will appear at the top of the action bar.

bottom-actions

A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.

expand-tooltip

Used to set the tooltip for the expand toggle.

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