Action Bar

Usage

"use client";

import { useState } from "react";

import { ActionBar } from "@thenamespace/uikit";

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

"use client";

import { useCallback, useMemo, useState } from "react";

import { ActionBar } from "@thenamespace/uikit";

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 "@thenamespace/uikit";
import { Button, Chip, Separator, Tooltip } from "@thenamespace/uikit";

<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 @thenamespace/uikit 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 @thenamespace/uikit.

ActionBar.Prefix

Leading section container.

ActionBar.Content

Middle section container for main actions.

ActionBar.Suffix

Trailing section container.