Action Bar

Display an action bar for selected items.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/action-bar.json

Usage


import {
  ActionBar,
  ActionBarBody,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
  ActionBarSeparator,
  ActionBarTrigger,
} from "@/components/ui/action-bar";


<ActionBar>
  <ActionBarTrigger />
  <ActionBarContent>
    <ActionBarClose />
    <ActionBarSelectionTrigger count={3} />
    <ActionBarBody>
      {/* Your action buttons */}
    </ActionBarBody>
  </ActionBarContent>
</ActionBar>

Controlled

Examples

Positioning

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

Offset

Use positioning.offset 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")] utility class controls the action bar internal padding.

Breakpoint utilities change the action bar spacing at different screen sizes.


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

API Reference

ActionBar

Root context provider. Wraps the trigger and floating toolbar.

Prop	Type	Default
`open`	`boolean`	-
`defaultOpen`	`boolean`	`false`
`positioning`	`{ placement?: "bottom" \| "bottom-start" \| "bottom-end", offset?: string }`	`{ placement: "bottom", offset: "16px" }`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`onOpenChange`	`(open: boolean) => void`	-

ActionBarContent

Floating toolbar positioned above selected items.

Prop	Type	Default
`aria-label`	`string`	`"Selection actions"`
`aria-labelledby`	`string`	-
`className`	`string`	-
`asChild`	`boolean`	`false`

Data attribute	Value
`data-slot`	`"action-bar-content"`
`data-state`	`"open" \| "closed"`

Attribute	Default
`--offset`	`16px` (from `positioning.offset`)
`--space`	`--spacing(4)`

ActionBarTrigger

Opens the action bar on click. Typically wraps the selection trigger.

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

ActionBarClose

Closes the action bar and clears the selection.

Prop	Type	Default
`aria-label`	`string`	`"Close"`
`className`	`string`	-
`asChild`	`boolean`	`false`

ActionBarSelectionTrigger

Shows the number of selected items or a custom label.

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

ActionBarBody

Holds the action buttons. Use for bulk actions on selected items.

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

On This Page

Installation Usage Controlled Examples Positioning Offset Close Trigger With Dialog With Menu Table Custom Spacing API Reference ActionBar ActionBarContent ActionBarTrigger ActionBarClose ActionBarSelectionTrigger ActionBarBody