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 true, 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 | 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 |
| icon | icon | Specifies an icon to display. | string | |
| 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 the label of the component. If no label is provided, the label inherits what's provided for the text prop. | string | |
| loading | loading | When true, a busy indicator is displayed. | boolean | false |
| messageOverrides | Use this property to override individual strings used by the component. | {
loading?: string;
indicator?: string;
indicatorLabel?: string;
} | ||
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| text | text | Specifies text that accompanies the icon. | string | |
| textEnabled | text-enabled | Indicates whether the text is displayed. | boolean | false |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding 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(): Promise<void> |