Action Bar

A floating bar at the bottom of the viewport for contextual actions. Common uses: bulk actions on selected table rows, or Discard / Save (and conflict) chrome on long-lived editors.

Basic

<HStack justify="center">
  <Button variant="outline" onClick={() => setSelected(!selected)}>
    {selected ? 'Deselect items' : 'Select items'}
  </Button>
  <ActionBar open={selected} onOpenChange={(open) => setSelected(open)}>
    <ActionBarContent>
      <ActionBarCloseTrigger />
      <ActionBarSelection>2 selected</ActionBarSelection>
      <ActionBarSeparator />
      <Button variant="ghost" size="sm">
        <Trash2 />
        Delete
      </Button>
      <Button variant="ghost" size="sm">
        <FolderInput />
        Move
      </Button>
    </ActionBarContent>
  </ActionBar>
</HStack>

With checkbox selection

Order #1001Order #1002Order #1003Order #1004

<Stack gap={3} className="w-full max-w-sm mx-auto">
  {items.map((item) => (
    <label
      key={item}
      className="flex items-center gap-3 rounded-xl border border-border px-4 py-3 cursor-pointer hover:bg-subtle transition-colors"
    >
      <Checkbox
        checked={selected.includes(item)}
        onCheckedChange={() => toggle(item)}
      />
      <span className="text-sm">{item}</span>
    </label>
  ))}
  <ActionBar
    open={selected.length > 0}
    onOpenChange={(open) => {
      if (!open) setSelected([])
    }}
  >
    <ActionBarContent>
      <ActionBarCloseTrigger />
      <ActionBarSelection>
        {selected.length} selected
      </ActionBarSelection>
      <ActionBarSeparator />
      <Button variant="ghost" size="sm">
        <Share />
        Share
      </Button>
      <Button variant="ghost" size="sm">
        <Archive />
        Archive
      </Button>
      <Button variant="ghost" size="sm">
        <Trash2 />
        Delete
      </Button>
    </ActionBarContent>
  </ActionBar>
</Stack>

Draft / conflict chrome (app-level)

For long-lived settings and detail forms that stay open while the server can change, do not invent a second floating bar — compose this primitive.

In WMS, use LiveEditActionBar (web/wms/src/components/live-edit-action-bar.tsx) with chrome from useLiveFormSync or liveEditChrome (free-state). It swaps unsaved vs “updated elsewhere” (Load update / Keep changes) and takes an explicit saving prop.

Recipe and decision tree (dialog snapshot vs live editor vs multi-step): web/wms/src/hooks/live-edit/RECIPE.md. That kit is app code, not part of @vesyl/ui-next — keep product copy and live-session wiring out of the design system.