Action Bar

Used to display a bottom action bar with a set of actions

Show Action bar

"use client"

import {
  ActionBarContent,
  ActionBarRoot,
  ActionBarSelectionTrigger,
  ActionBarSeparator,
} from "@/components/ui/action-bar"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { useState } from "react"
import { LuShare, LuTrash2 } from "react-icons/lu"

const Demo = () => {
  const [checked, setChecked] = useState(false)
  return (
    <>
      <Checkbox onCheckedChange={(e) => setChecked(!!e.checked)}>
        Show Action bar
      </Checkbox>
      <ActionBarRoot open={checked}>
        <ActionBarContent>
          <ActionBarSelectionTrigger>2 selected</ActionBarSelectionTrigger>
          <ActionBarSeparator />
          <Button variant="outline" size="sm">
            <LuTrash2 />
            Delete
          </Button>
          <Button variant="outline" size="sm">
            <LuShare />
            Share
          </Button>
        </ActionBarContent>
      </ActionBarRoot>
    </>
  )
}

Setup

If you don't already have the snippet, run the following command to add the action-bar snippet

chakra snippet add action-bar

The snippet includes a closed component composition based on the Popover component.

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 {
  ActionBarCloseTrigger,
  ActionBarContent,
  ActionBarRoot,
  ActionBarSelectionTrigger,
  ActionBarSeparator,
} from "@/components/ui/action-bar"

<ActionBarRoot>
  <ActionBarContent>
    <ActionBarCloseTrigger />
    <ActionBarSelectionTrigger />
    <ActionBarSeparator />
    <Button />
  </ActionBarContent>
</ActionBarRoot>

Examples

Close Trigger

Render the ActionBarCloseTrigger to close the action bar, and pass the onOpenChange handler to control the visibility of the action bar when the close trigger is clicked.

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