Components
BulkBar
A floating bulk-action bar that rises when a selection is active.
The white floating pill that appears at the bottom of a selection surface — measured for a 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.
Available since@crisp-ui-kit/crisp@0.11.0
Installation
npm install @crisp-ui-kit/crispProps
BulkBar
Prop
Type
BulkBarButton
Prop
Type
Usage
import { BulkBar, BulkBarButton, Menu, MenuItem } from "@crisp-ui-kit/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>
)}