Action Bar

Import

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 or Table.

"use client";

import {ActionBar} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

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.

import { ActionBar } from '@darkcode-ui/react';

<ActionBar isOpen={count > 0} onClose={clearSelection}>
  <ActionBar.Content>
    <ActionBar.SelectionCount count={count} />
    <ActionBar.Separator />
    <ActionBar.Actions>
      <ActionBar.Action icon={<ShareIcon />}>Share</ActionBar.Action>
      <ActionBar.Action icon={<TrashIcon />} variant="danger-soft">Delete</ActionBar.Action>
    </ActionBar.Actions>
    <ActionBar.Separator />
    <ActionBar.Close />
  </ActionBar.Content>
</ActionBar>

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.

"use client";

import type {Selection} from "@darkcode-ui/react";

import {ActionBar, ListView} from "@darkcode-ui/react";

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.

"use client";

import {ActionBar} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

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.

"use client";

import {ActionBar} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

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.

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.

ActionBar.Actions

Container for the actions. Collapses overflowing ActionBar.Action children into a "More" menu.

ActionBar.Action

A single action. Composes Button (defaults to size="sm", variant="ghost") and forwards its props.

ActionBar.Separator

Vertical divider with role="separator".

ActionBar.Close

A clear-selection button. Composes CloseButton and forwards all of its props. Defaults its onPress to the root's onClose when none is provided.

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.