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
-
Various basic operations, such as:
- Add
- Edit
- Sort
- Filter
-
Commonly used in other components, such as:
Sample
Accessibility
Keyboard navigation
| 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 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
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| active | active | When present, the component is highlighted. | boolean | false |
| alignment | alignment | Specifies the horizontal alignment of button elements with text content. | "center" | "end" | "start" | |
| appearance | appearance | Specifies the appearance of the component. | "solid" | "transparent" | "solid" |
| compact | compact | boolean | false | |
| disabled | disabled | When present, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| form | form | The id of the form that will be associated with the component.
When not set, the component will be associated with its ancestor form element, if any. | string | |
| icon | icon | Specifies an icon to display. | string | |
| iconFlipRtl | icon-flip-rtl | When present, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| indicator | indicator | When present, displays a visual indicator. | boolean | false |
| label | label | Specifies the label of the component. If no label is provided, the label inherits what's provided for the text prop. | string | |
| loading | loading | When present, a busy indicator is displayed. | boolean | false |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| text | text | Specifies text that accompanies the icon. | string | |
| textEnabled | text-enabled | When present, the text is displayed. | boolean | false |
| type | type | Specifies the default behavior of the component. | "button" | "reset" | "submit" | "button" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding non-interactive content, such as a calcite-icon. |
| tooltip | calcite-tooltip component instead. |
Styles
| Name | Description |
|---|---|
| --calcite-action-background-color-hover | Specifies the component's background color when hovered or focused. |
| --calcite-action-background-color-press | Specifies the component's background color when active. |
| --calcite-action-background-color-pressed | |
| --calcite-action-background-color | Specifies the component's background color. |
| --calcite-action-corner-radius-end-end | |
| --calcite-action-corner-radius-end-start | |
| --calcite-action-corner-radius-start-end | |
| --calcite-action-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 | |
| --calcite-action-text-color | Specifies the component's text color. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |