Action Bar

A floating bar that appears at the bottom of the viewport when items are selected. Use it to display contextual actions like delete, move, share, etc.

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>