Action | Calcite Design System

Actions are essential building blocks for the interface that perform inline operations.

Overview

Typically living within other components, Actions are flexible buttons that have an icon, can have a text label, notification style indicator, active state, and other useful properties.

Actions are distinct components, since they are more visually prominent. Whereas, Buttons are suited well for primary operations and call-to-actions such as "Save", "Cancel", "Back", and "Next".

Sample

Usage

Various basic operations, such as:
- Add
- Edit
- Sort
- Filter
Commonly used in other components, such as:
- Action Bar
- Action Pad
- Block
- Panel
- List

Component comparison

Action and Button can both trigger operations, but are designed for different contexts.

Action

This component

Best for compact, contextual operations embedded in existing interfaces such as Action Bars or component headers.

Often uses icons to convey purpose, with optional text labels based on layout and available space.

Button

Alternative

Best for primary operations and call-to-actions such as "Save", "Cancel", "Back", and "Next".

Typically has visible text to clearly communicate intent.

Accessibility

ARIA attributes

It is recommended to limit the use of ARIA attributes to ensure access and interactivity with your solutions. Developers should evaluate each specified attribute to support more audiences. For instance, if Action toggles another component's visibility on interaction, the expanded property name could be specified to provide additional context to assisitive technologies.

Use dark colors for code blocksCopy
let actionElExpanded = false;

actionEl.addEventListener("click", () => {
  actionElExpanded = !actionElExpanded;
  actionEl.aria = {
    expanded: actionElExpanded
  }
});

Key	Function
`Space`	Presses the component.
`Enter`	Presses the component.
`Tab`	Moves focus in and out of the component.
`Tab` and `Shift`	Moves focus in and out of the component.

Writing and copy

Keep text for Action labels simple and succinct
Avoid using more than two words in each item
Do not use punctuation like commas or periods in Action label text
Do not use contractions (you're, aren't, can't, haven't) in order to reduce confusion
Avoid writing Action text as questions
Recommended character maximum for each item: 15

API reference

Properties

Property	Attribute	Description	Type	Default
active	active	When `true`, the component is highlighted.	`boolean`	`false`
alignment	alignment	Specifies the horizontal alignment of button elements with text content.	`Alignment \| undefined`
appearance	appearance	deprecatedin v5.0.0, removal target v6.0.0 - No longer necessary. Specifies the appearance of the component.	`Extract<"solid" \| "transparent", Appearance>`	`"transparent"`
aria		When specified, overrides or extends ARIA properties and attributes on the component's button. Refer to the component's accessibility section for configuration considerations.	`Partial<Pick<AriaAttributesCamelCased, "controlsElements" \| "describedByElements" \| "expanded" \| "hasPopup" \| "labelledByElements" \| "ownsElements" \| "pressed" \| "checked"> & Pick<LuminaJsx.HTMLAttributes, "role">> \| undefined`
compact	compact	deprecatedin v2.11.0, removal target v5.0.0 - No longer necessary. When `true`, the side padding of the component is reduced.	`boolean`	`false`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
form	form	Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists.	`string \| undefined`
icon	icon	Specifies an icon to display.	`IconName \| undefined`
iconFlipRtl	icon-flip-rtl	When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).	`boolean`	`false`
indicator	indicator	When `true`, displays a visual indicator.	`boolean`	`false`
label	label	Specifies an accessible label for the component. If no label is provided, the label inherits what's provided for the `text` prop.	`string \| undefined`
loading	loading	When `true`, a busy indicator is displayed.	`boolean`	`false`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
overflowDisabled	overflow-disabled	When `true`, the component is not automatically overflowed into a menu by a parent `calcite-action-bar`.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
textrequired	text	Specifies text that accompanies the icon.	`string`
textEnabled	text-enabled	When `true`, displays `text` adjacent to the `icon`. When `true` and the component is used as a child of `calcite-action-bar`, the text will be shown initially regardless of the parent components `expanded` state.	`boolean`	`false`
type	type	Specifies the default behavior of the component.	`HTMLButtonElement["type"]`	`"button"`

Slots

Name	Description
default (unnamed)	A slot for adding non-interactive content, such as a `calcite-icon`.

Styles

Name	Description
--calcite-action-background-color-hover	Specifies the component's background color when hovered.
--calcite-action-background-color-press	Specifies the component's background color when active.
--calcite-action-background-color-pressed	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-background-color-press` instead. Specifies the component's background color when active.
--calcite-action-background-color	Specifies the component's background color.
--calcite-action-corner-radius-end-end	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end end.
--calcite-action-corner-radius-end-start	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end start.
--calcite-action-corner-radius-start-end	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start end.
--calcite-action-corner-radius-start-start	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start start.
--calcite-action-corner-radius	Specifies the component's corner radius.
--calcite-action-indicator-color	Specifies the component's indicator color.
--calcite-action-text-color-press	Specifies the component's text color when pressed or hovered.
--calcite-action-text-color-pressed	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-text-color-press` instead. Specifies the component's text color when hovered.
--calcite-action-text-color	Specifies the component's text color.

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.	`setFocus(options?: FocusOptions): Promise<void>`