# Action Bar
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/action-bar
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(layout)/action-bar.mdx
> A floating contextual toolbar that surfaces bulk actions for the current selection.
***
## Import
```tsx
import { ActionBar } from '@darkcode-ui/react';
```
## Usage
`ActionBar` is a floating toolbar that appears when one or more items are selected. Render it
conditionally — or pass `isOpen` — alongside a selectable collection such as
[ListView](/react/components/list-view) or [Table](/react/components/table).
```tsx
"use client";
import {ActionBar} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
export function Basic() {
return (
}
>
Share
}>
Move
}
variant="danger-soft"
>
Delete
);
}
```
## Anatomy
Compose the bar from a selection count, a group of actions, and a clear button. Use
`ActionBar.Action` for each action and `ActionBar.Separator` to visually group regions. Wire a
single `onClose` handler on the root — `ActionBar.Close` and the Escape key both use it.
```tsx
import { ActionBar } from '@darkcode-ui/react';
0} onClose={clearSelection}>
}>Share
} variant="danger-soft">Delete
```
## With List View
Drive the bar's visibility from a controlled selection. The bar animates in when the selection
becomes non-empty, and animates back out when it is cleared.
```tsx
"use client";
import type {Selection} from "@darkcode-ui/react";
import {ActionBar, ListView} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import {useState} from "react";
const files = [
{icon: "gravity-ui:file-text", id: "1", name: "Project Proposal.pdf", size: "2.4 MB"},
{icon: "gravity-ui:picture", id: "2", name: "Design Mockups.fig", size: "8.1 MB"},
{icon: "gravity-ui:file", id: "3", name: "Q4 Financial Report.xlsx", size: "1.2 MB"},
{icon: "gravity-ui:picture", id: "4", name: "Team Photo.png", size: "5.7 MB"},
];
export function WithListView() {
const [selected, setSelected] = useState(new Set());
const count = selected === "all" ? files.length : selected.size;
return (
<>
{(file) => (
{file.name}
{file.size}
)}
0} onClose={() => setSelected(new Set())}>
}
>
Share
}
variant="danger-soft"
>
Delete
);
}
```
## Overflow
When the actions don't fit, the trailing ones collapse into a "More" menu. Only `ActionBar.Action`
children participate — their `icon`, label, `onPress`, and `isDisabled` are reused to build the
menu items. Use `maxVisible` on `ActionBar.Actions` to cap the inline count, or let the bar measure
the available width and collapse responsively.
```tsx
"use client";
import {ActionBar} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
export function Overflow() {
return (
}
>
Share
}>
Move
}>
Copy
}>
Tag
}
variant="danger-soft"
>
Delete
);
}
```
## Position & inline
By default the bar is fixed to the bottom-center of the viewport. Use `position="top"` to pin it to
the top, or `inline` to anchor it within its container — useful when embedding the bar inside a
panel or card. The enter/exit slide follows the placement.
```tsx
"use client";
import {ActionBar} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
export function Inline() {
return (
Panel content…
}
>
Share
}
variant="danger-soft"
>
Delete
);
}
```
## CSS Classes
### Base Classes
- `.action-bar` — Positioning container. Fixed, centered, `pointer-events: none`.
- `.action-bar--top` — Pins the bar to the top edge.
- `.action-bar--inline` — Anchors the bar within its container instead of the viewport.
- `.action-bar__content` — The pill surface (`role="toolbar"`). Captures pointer events; uses the overlay background and shadow. Enter/exit animations are driven by `data-entering` / `data-exiting` and the placement via `data-position`.
### Element Classes
- `.action-bar__selection-count` — Leading selection count label.
- `.action-bar__actions` — Group wrapping the action buttons.
- `.action-bar__action` — An individual action button.
- `.action-bar__more` — The overflow "More" trigger.
- `.action-bar__separator` — Vertical divider between regions.
- `.action-bar__close` — Trailing clear-selection button.
## API Reference
### ActionBar
The positioning root.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isOpen` | `boolean` | `true` | When `false`, the bar animates out and then unmounts. |
| `onClose` | `() => void` | — | Called when dismissed via the clear button or the Escape key. |
| `position` | `"bottom" \| "top"` | `"bottom"` | Which viewport edge the bar is pinned to. |
| `inline` | `boolean` | `false` | Anchor the bar within its container instead of the viewport. |
| `autoFocus` | `boolean` | `false` | Move focus into the toolbar when it opens. |
| `className` | `string` | — | Additional CSS classes. |
| `children` | `ReactNode` | — | Typically a single `ActionBar.Content`. |
### ActionBar.Content
The visible toolbar pill. Built on React Aria's `Toolbar`, so it provides `role="toolbar"`, roving
focus, and arrow-key navigation. Accepts an `aria-label` (defaults to `"Selection actions"`).
### ActionBar.SelectionCount
Leading selection summary.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `count` | `number` | — | Renders `{count} selected` when no children are provided. |
| `children` | `ReactNode` | — | Custom content overriding the default count text. |
### ActionBar.Actions
Container for the actions. Collapses overflowing `ActionBar.Action` children into a "More" menu.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `maxVisible` | `number` | — | Hard cap on inline actions before the rest collapse into the menu. |
| `overflowLabel` | `string` | `"More actions"` | Accessible label for the overflow trigger. |
### ActionBar.Action
A single action. Composes [Button](/react/components/button) (defaults to `size="sm"`,
`variant="ghost"`) and forwards its props.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | `ReactNode` | — | Leading icon rendered before the label. |
| `children` | `ReactNode` | — | The action label. Reused as the menu item text when collapsed. |
| `variant` | `ButtonVariant` | `"ghost"` | The button variant (e.g. `"danger-soft"`). |
| `onPress` | `(e) => void` | — | Press handler, also invoked when chosen from the overflow menu. |
### ActionBar.Separator
Vertical divider with `role="separator"`.
### ActionBar.Close
A clear-selection button. Composes [CloseButton](/react/components/button) and forwards all of
its props. Defaults its `onPress` to the root's `onClose` when none is provided.
## Related Components
- **List View**: Single-column interactive list with selection and item actions
- **Table**: Structured data display in rows and columns
- **Button**: Allows a user to perform an action
## Accessibility
- The content region is a React Aria `Toolbar`: it uses `role="toolbar"` with an accessible label, manages a roving tab stop, and supports ← / → arrow-key navigation between actions.
- Escape calls `onClose`. When the overflow menu is open it consumes Escape first, so the bar is only dismissed once focus returns to the toolbar.
- Set `autoFocus` to move focus into the bar when it opens; focus is restored to the previously focused element when it closes.
- Animations respect `prefers-reduced-motion` — the bar appears and disappears instantly when reduced motion is requested.
- Keep the action set short and ensure each action has a visible label or `aria-label`.