ActionBar

ActionBar is a component that is used to display a bottom action bar with a set of actions.

<ActionBar.Root>
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

Usage

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

import { ActionBar } from "@/components/ui"

import { ActionBar } from "@workspaces/ui"

<ActionBar.Root>
  <ActionBar.OpenTrigger />
  <ActionBar.Content>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger />
  </ActionBar.Content>
</ActionBar.Root>

Use props

<ActionBar.Root
  content={
    <>
      <Button variant="outline" borderStyle="dashed">
        2 Selected
      </Button>
      <ActionBar.Separator />
      <Button startIcon={<TrashIcon />}>Delete</Button>
      <Button startIcon={<ShareIcon />}>Share</Button>
      <ActionBar.Separator />
      <ActionBar.CloseTrigger>
        <CloseButton size="md" />
      </ActionBar.CloseTrigger>
    </>
  }
  trigger={<Button>Open ActionBar</Button>}
/>

Change Duration

To change the duration, set duration to a numerical value (seconds).

<ActionBar.Root duration={0.4}>
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

Change Placement

To change the display position, set placement to "start-center", "end-start", etc. By default, "end-center" is set.

<ActionBar.Root placement="start-center">
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

Change Animation

To change the show or hide animation, set animationScheme to "block-start", "inline-end", etc. By default, the animation is determined based on the placement.

<ActionBar.Root animationScheme="inline-end" placement="start-end">
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

Custom Control

const { open, onClose, onOpen } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open ActionBar</Button>

    <ActionBar.Root
      content={
        <>
          <Button variant="outline" borderStyle="dashed">
            2 Selected
          </Button>
          <ActionBar.Separator />
          <Button startIcon={<TrashIcon />}>Delete</Button>
          <Button startIcon={<ShareIcon />}>Share</Button>
          <ActionBar.Separator />
          <ActionBar.CloseTrigger>
            <CloseButton size="md" />
          </ActionBar.CloseTrigger>
        </>
      }
      open={open}
      onClose={onClose}
    />
  </>
)

If you use this code, you need to add "use client" to the top of the file.

Props

ActionBar.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`animationScheme`	`"scale"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` The animation of the element.
`closeOnEsc`	`true`	`boolean` If `true`, the action bar will close when the `Esc` key is pressed.
`content`	-	`ReactNode` The action bar content to use.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`duration`	`0.1`	`MotionLifecycleProps<number> \| number` The animation duration.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onCloseComplete`	-	`() => void` Callback function to run side effects after the action bar has closed.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`portalProps`	-	`Omit<PortalProps, "children">` Props to be forwarded to the portal component.
`trigger`	-	`ReactNode` The action bar trigger to use.

ActionBar.CloseTrigger

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ActionBar.Content

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ActionBar.OpenTrigger

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ActionBar.Separator

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Accessibility

The ActionBar follows the WAI-ARIA - Dialog (Modal) Pattern for accessibility.

Key	Description	State
`Escape`	Closes the action bar.	`open={true}` + `closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`ActionBar.Content`	`role="dialog"`	Indicates that this is a dialog.
`ActionBar.OpenTrigger`	`aria-haspopup="dialog"`	Indicates that a dialog exists.
	`aria-expanded`	Sets to `"true"` if the action bar is open, and `"false"` if it is closed.
	`aria-controls`	If the action bar is open, sets to the `id` of `ActionBar.Content`.
	`aria-label`	Sets to `"Open action bar"`.
`ActionBar.CloseTrigger`	`aria-label`	Sets to `"Close action bar"`.

Similar Components

NativePopover is a component that floats around an element to display information using the HTML Popover API.

Popover is a component that floats around an element to display information.

Tooltip is a component that displays short information, such as supplementary details for an element.

Drawer is a component for a panel that appears from the edge of the screen.

Menu is a component that displays a common dropdown menu.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Uses Components & Hooks

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Popover is a component that floats around an element to display information.

Portal is a component that renders elements outside of the current DOM hierarchy.

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

useDisclosure is a custom hook that helps handle common open/close or toggle scenarios. It can be used to control components such as Modal, Dialog, Drawer, etc.