Action

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".

Usage

Sample

2 samples
1
<calcite-action text="Basemaps" icon="basemap" text-enabled></calcite-action>
v3.0.2

Accessibility

Keyboard navigation

KeyFunction
SpacePresses the component.
EnterPresses the component.
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of 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

Properties

PropertyAttributeDescriptionTypeDefault
activeactiveWhen true, the component is highlighted.booleanfalse
alignmentalignmentSpecifies the horizontal alignment of button elements with text content."center" | "end" | "start"
appearanceappearanceSpecifies the appearance of the component."solid" | "transparent""solid"
compactcompact
deprecatedNo longer necessary.
When true, the side padding of the component is reduced.
booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
iconiconSpecifies an icon to display.string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
indicatorindicatorWhen true, displays a visual indicator.booleanfalse
labellabelSpecifies the label of the component. If no label is provided, the label inherits what's provided for the text prop.string
loadingloadingWhen true, a busy indicator is displayed.booleanfalse
messageOverridesUse this property to override individual strings used by the component.{ loading?: string; indicator?: string; indicatorLabel?: string; }
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
textrequiredtextSpecifies text that accompanies the icon.string
textEnabledtext-enabledIndicates whether the text is displayed.booleanfalse

Slots

NameDescription
default (unnamed)A slot for adding a calcite-icon.
tooltip
deprecated Use the calcite-tooltip component instead.

Styles

NameDescription
--calcite-action-background-color-hoverSpecifies the component's background color when hovered or focused.
--calcite-action-background-color-pressSpecifies the component's background color when active.
--calcite-action-background-color-pressed
deprecated Use --calcite-action-background-color-press. Specifies the component's background color when active.
--calcite-action-background-colorSpecifies the component's background color.
--calcite-action-corner-radius-end-end
deprecated Use --calcite-action-corner-radius. Specifies the component's corner radius end end.
--calcite-action-corner-radius-end-start
deprecated Use --calcite-action-corner-radius. Specifies the component's corner radius end start.
--calcite-action-corner-radius-start-end
deprecated Use --calcite-action-corner-radius. Specifies the component's corner radius start end.
--calcite-action-corner-radius-start-start
deprecated Use --calcite-action-corner-radius. Specifies the component's corner radius start start.
--calcite-action-corner-radiusSpecifies the component's corner radius.
--calcite-action-indicator-colorSpecifies the component's indicator color.
--calcite-action-text-color-pressSpecifies the component's text color when hovered.
--calcite-action-text-color-pressed
deprecated Use --calcite-action-text-color-press. Specifies the component's text color when hovered.
--calcite-action-text-colorSpecifies the component's text color.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close