Action Bar for Vue

Bulk actions for selected rows sit at the bottom of the screen.

Use it for the life of a selection. Actions that are always available belong in a Button Group. In Vue, set open when the selection isn't empty, and Ark UI shows the bar.

Installation

Anatomy

Usage

<script setup lang="ts">
import {
  ArchiveIcon, DownloadIcon, PencilIcon, Trash2Icon, XIcon,
} from "lucide-vue-next";
import {
  ActionBar, ActionBarBody, ActionBarClose, ActionBarContent,
  ActionBarSeparator, ActionBarTrigger, ActionBarValue,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
</script>

<template>
  <ActionBar>
    <ActionBarTrigger as-child>
      <Button variant="outline">Open</Button>
    </ActionBarTrigger>
    <ActionBarContent aria-label="Bulk actions">
      <ActionBarValue :count=3 />
      <ActionBarSeparator />
      <ActionBarBody>
        <Button variant="ghost">
          <PencilIcon />
          <span class="max-sm:sr-only">Edit</span>
        </Button>
        <Button variant="ghost">
          <DownloadIcon />
          <span class="max-sm:sr-only">Export</span>
        </Button>
        <Button variant="ghost">
          <ArchiveIcon />
          <span class="max-sm:sr-only">Archive</span>
        </Button>
        <ActionBarSeparator />
        <Button variant="destructive">
          <Trash2Icon />
          <span class="max-sm:sr-only">Delete</span>
        </Button>
      </ActionBarBody>
      <ActionBarSeparator />
      <ActionBarClose as-child>
        <Button size="icon-md" variant="ghost">
          <XIcon />
        </Button>
      </ActionBarClose>
    </ActionBarContent>
  </ActionBar>
</template>

Accessibility

Demos

Close Trigger

The X is ActionBarClose, a button that asks the bar to close. Here open is controlled, so that click comes back through onOpenChange as false and you can clear the selection in the same handler. Use a visible close when Escape is easy to miss, especially on a phone. If closing must leave the checkboxes alone, do not put that reset in the close handler.

Controlled

No trigger lives inside the bar. A Toggle button outside it flips open, and the bar reports every close through onOpenChange, including the X and Escape. Control open when visibility follows a selection or some other state, which is the real product case. An ActionBarTrigger only fits when people open the bar on purpose, and a selection is not that.

Custom Spacing

ActionBarContent pads itself from the --space token. The component starts at spacing step 2, and this class sets that same step so the override has an obvious place. Pass a smaller or larger step when the bar should sit tighter on a dense table, or roomier around large actions. The count, the buttons, and the close control share that padding, so you change it once.

Dialog

Delete does not run immediately. The destructive button opens an alert dialog that names the action and asks for a confirm. Put a dialog on any bar action that destroys data or is hard to undo, and leave export or edit as plain buttons. The bar is where the action starts, the dialog is where it is confirmed, and cancel returns to the same selection.

Gutter

Two buttons set positioning.gutter to 24px or 32px, with placement staying at the bottom. Gutter is the gap between the bar and the screen edge. The default is 16px, and the bar also adds the bottom safe-area inset so a phone home indicator does not cover the actions. Raise the gutter when a banner or a mini player already occupies that edge.

Menu

The body of the bar is a single menu, opened upward with placement set to top, holding Archive, Duplicate, and a destructive Delete. Use a menu when the rare actions would make the bar a long row, and keep the everyday ones as buttons beside it. Upward matters because the bar is already at the bottom of the screen. A menu that opens downward runs off the viewport.

Positioning

Three buttons set positioning.placement to bottom-start, bottom, or bottom-end. Centered is the usual bulk bar, in the middle of the viewport. Start and end pin it to a corner when the selection lives in a sidebar or a narrow pane and a centered bar would cover the wrong column. The bar stays on the bottom edge, and placement will not move it to the top.

Table

Checkboxes on the orders drive the bar: open is true while the selected ids are not empty, and closing the bar clears that selection. The content shows the count, Send, Edit, a more menu, and Delete behind an alert dialog that lists the chosen orders. Copy this when the selection is rows. A bar with an Open button is only for trying the parts.

FAQ

API Reference