Action Bar

Usage

The action bar is designed to be controlled by table or checkbox selections. It provides a set of actions that can be performed on the selected items.

import { ActionBar } from "@chakra-ui/react"

<ActionBar.Root>
  <ActionBar.Positioner>
    <ActionBar.Content>
      <ActionBar.CloseTrigger />
      <ActionBar.SelectionTrigger />
      <ActionBar.Separator />
    </ActionBar.Content>
  </ActionBar.Positioner>
</ActionBar.Root>

Examples

Close Trigger

Render the ActionBar.CloseTrigger to close the action bar, and pass the onOpenChange handler to control the visibility of the action bar.

The open and onOpenChange props control the visibility of the action bar.

Within Dialog

Here's an example of composing the ActionBar and the Dialog to perform a delete action on a set of selected items.

Press the Delete projects button to open the dialog.

Placement

Use the placement prop to control the position of the action bar. The action bar supports three placement options: bottom (default), bottom-start, and bottom-end.

Props

Root