ActionBar

A floating toolbar you open wherever you need one: for a selection, with its actions and a button to clear it, or as an always-open tool bar.

LLMs

Basic

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

Set size="small" for a tighter bar with small Items and smaller text, for dense tables and grids.

Shape

Set shape to default for rounded corners, squircle for a smoother corner, or leave it at round for a pill.

Tone

The default tone follows the page, and tone="light" or tone="dark" keeps the bar in that mode on any page.
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

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

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

Set container="window" to fix the bar to the bottom of the window instead of the area it is placed in.

Playground

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.

In context

The component inside real screens, with the components it usually sits beside.

Tool bar

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

Drive the bar from a table's rowSelection, where the Delete item's onSelect removes the selected tasks and closes the bar.

Selection limit

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.