# antuikit / ActionBar

> A floating toolbar you open where you need it, often for a selection, with roving focus between its Items and Esc to close.

Docs: https://antuikit.com/docs/components/action-bar

## Install

npx antuikit@latest init
npx antuikit@latest add action-bar

## Import

import { ActionBar } from "@/components/ui/action-bar";

## Demos

- [Basic](https://ui.antuikit.com/embed/action-bar/basic.md): Set `open` while something is selected and clear the selection in `onOpenChange`, which runs on Esc, on the chip's clear button and after an action.
- [Size](https://ui.antuikit.com/embed/action-bar/sizes.md): Set `size="small"` for a tighter bar with small Items and smaller text, for dense tables and grids.
- [Shape](https://ui.antuikit.com/embed/action-bar/shapes.md): Set `shape` to `default` for rounded corners, `squircle` for a smoother corner, or leave it at `round` for a pill.
- [Tone](https://ui.antuikit.com/embed/action-bar/tones.md): The default tone follows the page, and `tone="light"` or `tone="dark"` keeps the bar in that mode on any page.
- [Item menus](https://ui.antuikit.com/embed/action-bar/menus.md): Pass `menu` to an Item to open a dropdown from it, like an icon-only Add button and an Actions menu beside a primary Export.
- [Draggable](https://ui.antuikit.com/embed/action-bar/draggable.md): Set `draggable` to add a grip at the start of the bar, so it can be dragged anywhere in its scroll area, or moved with the arrow keys.
- [Color](https://ui.antuikit.com/embed/action-bar/color.md): Add `ActionBar.Color` to paint the selected rows with a palette's light tint, and pick No color to clear it again.
- [Fixed to the window](https://ui.antuikit.com/embed/action-bar/portal.md): Set `container="window"` to fix the bar to the bottom of the window instead of the area it is placed in.
- [Playground](https://ui.antuikit.com/embed/action-bar/playground.md): Switch `tone`, `shape`, `size`, `side`, `align`, `container` and `motion`, set the `offset` x and y, and turn `draggable`, `block` and each kind of Item on or off, on a DataGrid's bar.
- [Tool bar](https://ui.antuikit.com/embed/action-bar/toolbar.md): Use the bar as an always-open tool bar, with an Item `menu` beside each tool for its variants and a Segmented to switch modes, like a design app's.
- [With a table](https://ui.antuikit.com/embed/action-bar/with-table.md): Drive the bar from a table's `rowSelection`, where the Delete item's `onSelect` removes the selected tasks and closes the bar.
- [Selection limit](https://ui.antuikit.com/embed/action-bar/limit.md): Pick up to 5 people: a progress circle fills as you pick, the picked faces stack in an `Avatar.Group`, and the list stops taking picks at the limit, in a `block` bar.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/action-bar`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `ActionBar` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.