Sections

Components

Utilities

Forms

Hooks

useIsMobile

Action Bar

Copy Markdown

Display an action bar for selected items.

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

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#

PreviewCode

Toggle

Examples#

Positioning#

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

PreviewCode

Bottom StartBottomBottom End

Gutter#

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

PreviewCode

Gutter 24pxGutter 32px

Close Trigger#

PreviewCode

Open

With Dialog#

PreviewCode

Open

PreviewCode

Open

Table#

PreviewCode

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).

PreviewCode

Open

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 ](/docs/components/accordion)[

Alert Dialog ](/docs/components/alert-dialog)

On This Page

Installation Anatomy Usage Controlled Examples Positioning Gutter Close Trigger With Dialog With Menu Table Custom Spacing API Reference ActionBar ActionBarContent ActionBarTrigger ActionBarValue ActionBarSeparator ActionBarBody ActionBarClose