BulkBar

The white floating pill that appears at the bottom of a selection surface — measured from Attio's records table. Render it conditionally (e.g. count > 0 && <BulkBar …/>) inside a position: relative container; it centres itself via a flex anchor (not a resting transform), so a position: fixed Menu overflow inside it stays anchored to its trigger. Used by RecordsTable.

Preview

Usage

import { BulkBar, BulkBarButton, Menu, MenuItem } from "crisp";

{selected.size > 0 && (
  <BulkBar count={selected.size} onClear={() => clearSelection()}>
    <BulkBarButton icon={<ListPlus size={15} />} onClick={addToList}>
      Add to list
    </BulkBarButton>
    <Menu trigger={<BulkBarButton icon={<MoreHorizontal size={15} />}>More</BulkBarButton>}>
      <MenuItem icon={<Trash2 size={15} />} danger onSelect={remove}>Delete</MenuItem>
    </Menu>
  </BulkBar>
)}

API

BulkBar

BulkBarButton

Extends <button>. icon?: ReactNode renders a leading icon; danger?: boolean applies destructive styling. Works as a Menu trigger.