Action Bar

Usage

The ActionBar component is a floating pill-shaped toolbar that animates in/out based on the isOpen prop. It uses a Prefix / Content / Suffix structure.

Combine with ListView for bulk selection rows.

With Data Grid

Combine with DataGrid for bulk selection workflows. The ActionBar appears when rows are selected and provides contextual actions like edit, export, archive, or delete.

Anatomy

import {ActionBar} from "@heroui-pro/react";
import {Button, Chip, Separator, Tooltip} from "@heroui/react";

<ActionBar isOpen={hasSelection}>
  <ActionBar.Prefix>
    <Chip size="sm">{count}</Chip>
  </ActionBar.Prefix>
  <Separator />
  <ActionBar.Content>
    <Button size="sm" variant="ghost">Edit</Button>
    <Button size="sm" variant="ghost">Export</Button>
  </ActionBar.Content>
  <Separator />
  <ActionBar.Suffix>
    <Tooltip>
      <Button isIconOnly aria-label="Clear" size="sm" variant="ghost" onPress={onClear}>
        <Xmark />
      </Button>
      <Tooltip.Content>Clear selection</Tooltip.Content>
    </Tooltip>
  </ActionBar.Suffix>
</ActionBar>

All three sections (Prefix, Content, Suffix) are optional. Use Separator from @heroui/react between sections as needed.

Responsive Labels

Use the action-bar__label CSS class on any text you want hidden on mobile. Below the sm breakpoint (640px), elements with this class become sr-only — buttons collapse to icon-only while remaining accessible.

<Button aria-label="Edit" size="sm" variant="ghost">
  <Pencil />
  <span className="action-bar__label">Edit</span>
</Button>

CSS Classes

Base Classes

• .action-bar — Outer positioning wrapper. Fixed to viewport bottom-center with pointer-events: none.
• .action-bar__wrapper — The visible pill surface. Restores pointer-events: auto, applies shadow.

Element Classes

• .action-bar__prefix — Leading section (badges, counts).
• .action-bar__content — Middle section for main actions.
• .action-bar__suffix — Trailing section (dismiss button).
• .action-bar__label — Text that collapses to sr-only below 640px.

API Reference

ActionBar

The root component. Extends ToolbarProps from @heroui/react.

ActionBar.Prefix

Leading section container.

ActionBar.Content

Middle section container for main actions.

ActionBar.Suffix

Trailing section container.