Action Bar

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

Show Action bar

'use client'

import { useState } from 'react'

import { ActionBar, Button, Checkbox } from '@saas-ui/react'
import { LuShare, LuTrash2 } from 'react-icons/lu'

export const ActionBarBasic = () => {
  const [checked, setChecked] = useState(false)
  return (
    <>
      <Checkbox onCheckedChange={(e) => setChecked(!!e.checked)}>
        Show Action bar
      </Checkbox>
      <ActionBar.Root open={checked}>
        <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.Root>
    </>
  )
}

Anatomy

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 '@saas-ui/react/action-bar'

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

Examples

Close Trigger

Render the ActionBarCloseTrigger 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.

Show Action bar

'use client'

import { useState } from 'react'

import { ActionBar, Button, Checkbox } from '@saas-ui/react'
import { LuShare, LuTrash2 } from 'react-icons/lu'

export const ActionBarWithCloseTrigger = () => {
  const [checked, setChecked] = useState(false)
  return (
    <>
      <Checkbox
        checked={checked}
        onCheckedChange={(e) => setChecked(!!e.checked)}
      >
        Show Action bar
      </Checkbox>
      <ActionBar.Root
        open={checked}
        onOpenChange={(e) => setChecked(e.open)}
        closeOnInteractOutside={false}
      >
        <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.CloseButton />
        </ActionBar.Content>
      </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.

Check to select projects

'use client'

import { useState } from 'react'

import { ActionBar, Button, Checkbox, Dialog } from '@saas-ui/react'
import { LuSquarePlus, LuTrash2 } from 'react-icons/lu'

export const ActionBarWithDialog = () => {
  const [checked, setChecked] = useState(false)
  return (
    <>
      <Checkbox onCheckedChange={(e) => setChecked(!!e.checked)}>
        Check to select projects
      </Checkbox>
      <ActionBar.Root open={checked}>
        <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>

            <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.Root>
        </ActionBar.Content>
      </ActionBar.Root>
    </>
  )
}

Props

Root

Prop	Default	Type
No props to display

Accordion

Alert