"use client"
import { ActionBar, Button, Checkbox, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { LuShare, LuTrash2 } from "react-icons/lu"
const Demo = () => {
const [checked, setChecked] = useState(false)
return (
<>
<Checkbox.Root onCheckedChange={(e) => setChecked(!!e.checked)}>
<Checkbox.HiddenInput />
<Checkbox.Control />
<Checkbox.Label>Show Action bar</Checkbox.Label>
</Checkbox.Root>
<ActionBar.Root open={checked}>
<Portal>
<ActionBar.Positioner>
<ActionBar.Content>
<ActionBar.SelectionTrigger>
2 selected
</ActionBar.SelectionTrigger>
<ActionBar.Separator />
<Button variant="outline" size="sm">
<LuTrash2 />
Delete
</Button>
<Button variant="outline" size="sm">
<LuShare />
Share
</Button>
</ActionBar.Content>
</ActionBar.Positioner>
</Portal>
</ActionBar.Root>
</>
)
}
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.
"use client"
import {
ActionBar,
Button,
Checkbox,
CloseButton,
Portal,
} from "@chakra-ui/react"
import { useState } from "react"
import { LuShare, LuTrash2 } from "react-icons/lu"
const Demo = () => {
const [checked, setChecked] = useState(false)
return (
<>
<Checkbox.Root
checked={checked}
onCheckedChange={(e) => setChecked(!!e.checked)}
>
<Checkbox.HiddenInput />
<Checkbox.Control />
<Checkbox.Label>Show Action bar</Checkbox.Label>
</Checkbox.Root>
<ActionBar.Root
open={checked}
onOpenChange={(e) => setChecked(e.open)}
closeOnInteractOutside={false}
>
<Portal>
<ActionBar.Positioner>
<ActionBar.Content>
<ActionBar.SelectionTrigger>
2 selected
</ActionBar.SelectionTrigger>
<ActionBar.Separator />
<Button variant="outline" size="sm">
<LuTrash2 />
Delete
</Button>
<Button variant="outline" size="sm">
<LuShare />
Share
</Button>
<ActionBar.CloseTrigger asChild>
<CloseButton size="sm" />
</ActionBar.CloseTrigger>
</ActionBar.Content>
</ActionBar.Positioner>
</Portal>
</ActionBar.Root>
</>
)
}
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.
"use client"
import { ActionBar, Button, Checkbox, Dialog, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { LuSquarePlus, LuTrash2 } from "react-icons/lu"
const Demo = () => {
const [checked, setChecked] = useState(false)
return (
<>
<Checkbox.Root onCheckedChange={(e) => setChecked(!!e.checked)}>
<Checkbox.HiddenInput />
<Checkbox.Control />
<Checkbox.Label>Check to select projects</Checkbox.Label>
</Checkbox.Root>
<ActionBar.Root open={checked}>
<Portal>
<ActionBar.Positioner>
<ActionBar.Content>
<ActionBar.SelectionTrigger>
4 selected
</ActionBar.SelectionTrigger>
<ActionBar.Separator />
<Button variant="outline" size="sm">
<LuSquarePlus />
Add to collection
</Button>
<Dialog.Root placement="center">
<Dialog.Trigger asChild>
<Button variant="surface" colorPalette="red" size="sm">
<LuTrash2 />
Delete projects
</Button>
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop />
<Dialog.Positioner>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>Delete projects</Dialog.Title>
</Dialog.Header>
<Dialog.Body>
<Dialog.Description>
Are you sure you want to delete 4 projects?
</Dialog.Description>
</Dialog.Body>
<Dialog.Footer>
<Button variant="outline">Cancel</Button>
<Button colorPalette="red">Delete</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>
</ActionBar.Content>
</ActionBar.Positioner>
</Portal>
</ActionBar.Root>
</>
)
}
Props
Root
Prop | Default | Type |
---|---|---|
No props to display |