Action Bar is composed of Actions which are typically used for core operations in the interface.
Overview
The design of Action Bar accommodates actions in vertical, horizontal, and grid layouts. Built from a group of Actions, the Action Bar handles properties like positioning, light/dark modes, and expansion controls.
Action Bar was created to be placed on the edges of an interface. For a floating group of Actions, enable the floating property. To prevent the automatic overflowing of Actions when there is limited space, enable the overflow property.
When using Action Bar, its parent should use the CSS Flexbox layout, like so:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
}Usage
- Core functions and menus in an application
- Toolbar for the interface
- Set of Actions in a focused view
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Presses the selected calcite-action. |
Enter | Presses the selected calcite-action. |
Tab | Move focus to next non-disabled calcite-action. If the currently focused step is the last step, the focus will leave the component. |
Tab and Shift | Move focus to previous non-disabled calcite-action. If the currently focused step is the first step, the focus will leave the component. |
Writing and copy
Refer to Action for writing and copy guidelines.
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| actionsEndGroupLabel | actions-end-group-label | Specifies an accessible name for the last calcite-action-group. | string | |
| expandDisabled | expand-disabled | When true, the expand-toggling behavior is disabled. | boolean | false |
| expanded | expanded | When true, expands the component and its contents. | boolean | false |
| floating | floating | When true, the component is in a floating state. | boolean | false |
| layout | layout | Specifies the layout direction of the actions. | Extract<"horizontal" | "vertical" | "grid", Layout> | "vertical" |
| messageOverrides | Overrides individual strings used by the component. | Record<string, unknown> | undefined | ||
| overflowActionsDisabled | overflow-actions-disabled | When true, disables automatically overflowing calcite-actions that won't fit into menus. | boolean | false |
| overlayPositioning | overlay-positioning | Specifies the type of positioning to use for overlaid content, where:
"absolute" works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
"fixed" is used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | OverlayPositioning | "absolute" |
| position | position | Specifies the position of the component depending on the element's dir property. | Extract<"start" | "end", Position> | |
| scale | scale | Specifies the size of the expand calcite-action. | Scale | "m" |
| selectionAppearance | selection-appearance | Specifies the selection appearance of the component | Extract<"neutral" | "highlight", SelectionAppearance> | "neutral" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding calcite-actions that will appear at the top of the component. |
| actions-end | A slot for adding calcite-actions that will appear at the end of the component, prior to the collapse/expand button. |
| expand-tooltip | A slot to set the calcite-tooltip for the expand toggle. |
Styles
| Name | Description |
|---|---|
| --calcite-action-bar-background-color | Specifies the component's background color. |
| --calcite-action-bar-corner-radius | Specifies the component's border radius when floating is true. |
| --calcite-action-bar-expanded-max-width | When layout is "vertical", specifies the component's maximum width. |
| --calcite-action-bar-items-space | Specifies the space between slotted components in the component. |
| --calcite-action-bar-shadow | Specifies the component's shadow when floating is true. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteActionBarCollapse | Fires when the component's content area is collapsed. | |
| calciteActionBarExpand | Fires when the component's content area is expanded. | |
| calciteActionBarToggle | Fires when the expanded property is toggled. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |