Action Bar

Display an action bar for selected items.

Installation


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

Anatomy


ActionBar
├── ActionBarTrigger
└── ActionBarContent
    ├── ActionBarClose
    ├── ActionBarValue
    └── ActionBarBody

Usage


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


<ActionBar>
  <ActionBarTrigger asChild>
    <Button variant="outline">Open</Button>
  </ActionBarTrigger>
  <ActionBarContent>
    <ActionBarClose />
    <ActionBarValue count={3} />
    <ActionBarBody>
      <Button size="icon-md" variant="secondary" aria-label="Send">
        <SendIcon />
      </Button>
    </ActionBarBody>
  </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(4).

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.

Prop	Type	Default
`open`	`boolean`	-
`defaultOpen`	`boolean`	`false`
`positioning`	`{ placement?: "bottom" \| "bottom-start" \| "bottom-end", gutter?: string }`	`{ placement: "bottom", gutter: "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`

CSS Variable	Default
`--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`

ActionBarValue

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 Anatomy Usage Controlled Examples Positioning Gutter Close Trigger With Dialog With Menu Table Custom Spacing API Reference ActionBar ActionBarContent ActionBarTrigger ActionBarClose ActionBarValue ActionBarBody