Calcite Actions are essential building blocks for the interface that perform inline operations.
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".
Various basic operations, such as:
Commonly used in other components, such as:
- Action Bar
- Action Pad
- Pick List
- Value List
|Press on item|
|Move focus to next non-disabled item. If the currently focused step is the last step, the focus will leave the component|
|Move focus to previous non-disabled item. If the currently focused step is the first step, the focus will leave the component|
- 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
Indicates whether the action is highlighted.
Optionally specify the horizontal alignment of button elements with text content.
Specify the appearance style of the action, defaults to solid.
Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
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/.
Indicates unread changes.
string to override English loading text
The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.
When true, content is waiting to be loaded. This state shows a busy indicator.
Specifies the size of the action.
Text that accompanies the action icon.
Indicates whether the text is displayed.
Emitted when the action has been clicked.
Sets focus on the component.
A slot for adding a `calcite-icon`.