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 the accessible label for the last calcite-action-group. | string | |
| expandDisabled | expand-disabled | When present, the expand-toggling behavior is disabled. | boolean | false |
| expanded | expanded | When present, expands the component and its contents. | boolean | false |
| floating | floating | When present, the component is in a floating state. | boolean | false |
| layout | layout | Specifies the layout direction of the actions. | "grid" | "horizontal" | "vertical" | "vertical" |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| overflowActionsDisabled | overflow-actions-disabled | When present, disables automatically overflowing calcite-actions that won't fit into menus. | boolean | false |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content.
Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
"fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | "absolute" |
| position | position | Arranges the component depending on the element's dir property. | "end" | "start" | |
| scale | scale | Specifies the size of the expand calcite-action. | "l" | "m" | "s" | "m" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding calcite-actions that will appear at the top of the component. |
| bottom-actions | "actions-end" slot instead. A slot for adding calcite-actions that will appear at the bottom of the component, above the collapse/expand button. |
| 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<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |