Action Pad | Calcite Design System

deprecated in v3.2Refer to the Action Bar component documentation.

Learn more

Overview

Action Pad accommodates for horizontal and vertical layouts that can be expanded to show text labels. Distinct from Action Bar, Action Pad has rounded corners and box-shadows and should be positioned above other content. Built from a group of Actions, the Action Pad handles props like positioning, light/dark modes, and expand controls.

Action Pad was created to be placed on a map, or floating by itself in an area of the interface. For a flush inline group of Actions, please consider Action Bar.

Sample

Usage

Editing tools
Drawing/polygon tools
Zoom and various map controls

Accessibility

Key	Function
`Space`	Presses the `calcite-action`.
`Enter`	Presses the `calcite-action`.
`Tab`	Moves focus in and out of component.
`Tab` and `Shift`	Moves focus in and out of 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 \| undefined`
expandDisabled	expand-disabled	When `true`, the expand-toggling behavior is disabled.	`boolean`	`false`
expanded	expanded	When `true`, expands the component and its contents.	`boolean`	`false`
layout	layout	Specifies the layout of the component.	`Extract<"horizontal" \| "vertical" \| "grid", Layout>`	`"vertical"`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
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	Specifies the position of the component depending on the element's `dir` property.	`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 to the component.
expand-tooltip	A slot to set the `calcite-tooltip` for the expand toggle.

Styles

Name	Description
--calcite-action-pad-corner-radius	Specifies the component's border radius.
--calcite-action-pad-expanded-max-width	When `expanded` and `layout` is `"vertical"`, specifies the component's maximum width.
--calcite-action-pad-items-space	Specifies the component's space between slotted components.

Events

Name	Description	Behavior
calciteActionPadCollapse	Fires when the component's content area is collapsed.	bubblescomposed
calciteActionPadExpand	Fires when the component's content area is expanded.	bubblescomposed
calciteActionPadToggle	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>`