Lenso UI

Foundation component · Collection actions

Selection Toolbar

A floating action surface for an active selection.

Live playground

Ada Lovelace
Grace Hopper
Alan Turing

When to use it

  • Use a Selection Toolbar when selecting records reveals batch actions. Keep it anchored to the collection rather than the viewport.
  • Pass the selection count and clear callback from the owning table, grid, or list. The toolbar does not own selection state.
  • Keep actions specific to the selected records. If several actions are available, put them in a Menu behind one Actions trigger.

Interaction and accessibility

  • The toolbar disappears when count reaches zero. The clear button has a name and stays square.
  • Use countLabel and clearLabel to localize visible and accessible copy.
  • Keep keyboard focus in the normal tab order; do not move focus merely because selection changed.

Implementation

The collection owns selection and actions. The toolbar provides one consistent floating surface.

import { SelectionToolbar } from "@lenso/ui/selection-toolbar";
import { Menu } from "@lenso/ui/menu";

<div style={{ position: "relative" }}>
  {/* Your selectable collection */}
  <SelectionToolbar.Root count={selectedIds.size} onClear={clearSelection}>
    <Menu.Root>
      <Menu.Trigger render={<SelectionToolbar.Action />}>Actions</Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner side="top">
          <Menu.Popup>
            <Menu.Item onClick={copySelected}>Copy selected</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  </SelectionToolbar.Root>
</div>;
Lenso UI