Sections

Utilities

Forms

Hooks

useIsMobileNew

Action Bar

Display an action bar for selected items.

Installation


pnpm dlx shadcn@latest add @shark/action-bar

Anatomy


ActionBar
├── ActionBarTrigger
└── ActionBarContent
    ├── ActionBarValue
    ├── ActionBarSeparator
    ├── ActionBarBody
    │   ├── Button
    ├── ActionBarSeparator
    └── ActionBarClose

Usage


import {
  ArchiveIcon,
  DownloadIcon,
  PencilIcon,
  Trash2Icon,
  XIcon,
} from "lucide-react";
import {
  ActionBar,
  ActionBarBody,
  ActionBarClose,
  ActionBarContent,
  ActionBarSeparator,
  ActionBarTrigger,
  ActionBarValue,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";


<ActionBar>
  <ActionBarTrigger asChild>
    <Button variant="outline">Open</Button>
  </ActionBarTrigger>
  <ActionBarContent>
    <ActionBarValue count={3} />
    <ActionBarSeparator />
    <ActionBarBody>
      <Button variant="ghost">
        <PencilIcon />
        <span className="max-sm:sr-only">Edit</span>
      </Button>
      <ActionBarSeparator />
      <Button variant="destructive">
        <Trash2Icon />
        <span className="max-sm:sr-only">Delete</span>
      </Button>
    </ActionBarBody>
    <ActionBarSeparator />
    <ActionBarClose asChild>
      <Button size="icon-md" variant="ghost">
        <XIcon />
      </Button>
    </ActionBarClose>
  </ActionBarContent>
</ActionBar>

Controlled

Examples

Positioning

Use the positioning.placement prop to position the action bar.

Gutter

Use positioning.gutter to control the distance from the bottom edge.

Close Trigger

With Dialog

Table

Orders with checkbox selection and action bar.
ID	Name	Status	Amount
SO-01	Macbook Pro 16	progress	245,12 $
SO-02	Apple Watch Series 9	transit	122,18 $
SO-03	AirPods Max	pending	89,50 $
SO-04	iPad Pro 13	pending	310,00 $
SO-05	iPhone 15 Pro Max	transit	156,75 $

Custom Spacing

The [--space:--spacing("value")] on ActionBarContent controls the internal spacing.

Default spacing is --spacing(2).

You can use breakpoint utilities to change the internal spacing at different screen sizes.


md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference

ActionBar

Root component. Provides open state and positioning to descendants.

Prop	Type	Default
`open`	`boolean`	-
`defaultOpen`	`boolean`	`false`
`positioning`	`ActionBarPositioning`	`{ placement: "bottom", gutter: "16px" }`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`onOpenChange`	`(open: boolean) => void`	-

ActionBarContent

Root component.

Prop	Type	Default
`className`	`string`	-
`aria-label`	`string`	-
`asChild`	`boolean`	-

CSS variable	Default
`--space`	`--spacing(2)`

ActionBarTrigger

Button that opens the action bar.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ActionBarValue

Displays the selection count.

Prop	Type	Default
`count`	`number`	-
`label`	`string`	-
`className`	`string`	-
`asChild`	`boolean`	-

ActionBarSeparator

Vertical rule. Renders a Separator.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ActionBarBody

Flex row for primary actions.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ActionBarClose

Closes the action bar.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

Accordion

Alert Dialog