Action Bar
A floating action bar that appears at the bottom or top of the viewport to display contextual actions for selected items.
Installation
pnpm dlx shadcn@latest add "@diceui/action-bar"Layout
import {
ActionBar,
ActionBarSelection,
ActionBarSeparator,
ActionBarGroup,
ActionBarItem,
ActionBarClose,
} from "@/components/ui/action-bar";
return (
<ActionBar>
<ActionBarSelection />
<ActionBarSeparator />
<ActionBarGroup>
<ActionBarItem />
<ActionBarItem />
</ActionBarGroup>
<ActionBarClose />
</ActionBar>
);Examples
Position
Use the side and align props to control where the action bar appears.
API Reference
ActionBar
The root component that controls the visibility and position of the action bar. Has role="toolbar" for accessibility.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-side] | "top" | "bottom" |
[data-align] | "start" | "center" | "end" |
[data-orientation] | "horizontal" | "vertical" |
ActionBarSelection
Displays selection information, typically used to show how many items are selected.
Prop
Type
ActionBarGroup
A container for action items that implements roving focus management. Items within a group can be navigated using arrow keys, forming a single tab stop. See Keyboard Interactions for full details.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | "horizontal" | "vertical" |
ActionBarItem
An interactive button item within the action bar. When used inside a Group, participates in roving focus navigation.
Prop
Type
ActionBarClose
A button that closes the action bar by calling the onOpenChange callback with false. The close button has its own tab stop, separate from the group's roving focus.
Prop
Type
ActionBarSeparator
A visual separator between action bar items.
Prop
Type
Accessibility
Keyboard Interactions
The action bar follows the WAI-ARIA Toolbar pattern for keyboard navigation.
| Key | Description |
|---|---|
| Tab | Moves focus to the next focusable element (Action Group or Close button). |
| ShiftTab | Moves focus to the previous focusable element. |
| Escape | Closes the action bar and calls onOpenChange(false). |
| ArrowLeft | Moves focus to the previous item in the group (horizontal orientation). |
| ArrowUp | Moves focus to the previous item in the group (vertical orientation). |
| ArrowRight | Moves focus to the next item in the group (horizontal orientation). |
| ArrowDown | Moves focus to the next item in the group (vertical orientation). |
| Home | Moves focus to the first item in the group. |
| End | Moves focus to the last item in the group. |