Action

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

Overview

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

Calcite Actions are distinct from Calcite Buttons. Since they are more visually prominent, Buttons are suited well for primary operations and call-to-actions like "Save", "Cancel", "Back", and "Next".

Usage

  • Various basic operations, such as:

    • Add
    • Edit
    • Sort
    • Filter
  • Commonly used in other components, such as:

    • Action Bar
    • Action Pad
    • Block
    • Panel
    • Pick List
    • Value List

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.82
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

  • Keep text for Action labels simple and succinct
  • Avoid using more than 1-2 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

calcite-action
v1.0.0-beta.82

Properties

PropertyAttributeDescriptionTypeValues
activeactive

Indicates whether the action is highlighted.

booleanA boolean property should be present, or not
truefalse
alignmentalignment

Optionally specify the horizontal alignment of button elements with text content.

optional
typedChoose from a set of typed values
centerendstart
appearanceappearance

Specify the appearance style of the action, defaults to solid.

typedChoose from a set of typed values
clearsolid (default)
compactcompact

Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.

booleanA boolean property should be present, or not
truefalse
disableddisabled

When true, disabled prevents interaction. This state shows items with lower opacity/grayed.

booleanA boolean property should be present, or not
truefalse
iconicon

The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.

optional
iconAccepts a Calcite UI Icon string
indicatorindicator

Indicates unread changes.

booleanA boolean property should be present, or not
truefalse
intlLoadingintl-loading

string to override English loading text

optional
stringA custom string
"Loading" (default)
labellabel

The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.

optional
stringA custom string
undefined
loadingloading

When true, content is waiting to be loaded. This state shows a busy indicator.

booleanA boolean property should be present, or not
truefalse
scalescale

Specifies the size of the action.

typedChoose from a set of typed values
lm (default)s
texttext

Text that accompanies the action icon.

required
stringA custom string
undefined
textEnabledtext-enabled

Indicates whether the text is displayed.

booleanA boolean property should be present, or not
truefalse

Events

NameDescriptionDetail
calciteActionClick
deprecateduse onClick instead.

Emitted when the action has been clicked.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding a `calcite-icon`.

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