---
title: ActionBar
description: "`ActionBar` is a component that is used to display a bottom action bar with a set of actions."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/action-bar/action-bar.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/action-bar
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-action-bar--basic
---

# ActionBar

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

```tsx
<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

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

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

```tsx
import { ActionBar } from "@workspaces/ui"
```

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

### Use props

```tsx
<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).

```tsx
<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.

```tsx
<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`.

```tsx
<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

```tsx
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}
    />
  </>
)
```

## 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](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) for accessibility.

### Keyboard Navigation

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

### ARIA Roles and Attributes

| Element                                | Roles and Attributes     | Usage                                                                            |
| -------------------------------------- | ------------------------ | -------------------------------------------------------------------------------- |
| `section.ui-action-bar__content`       | `role="dialog"`          | Indicates that this is a dialog.                                                 |
|                                        | `id`                     | Used to associate with `button.ui-action-bar__trigger--open`.                    |
| `button.ui-action-bar__trigger--open`  | `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 `section.ui-action-bar__content`. |
|                                        | `aria-label`             | Sets to `"Open action bar"`.                                                     |
| `button.ui-action-bar__trigger--close` | `aria-label`             | Sets to `"Close action bar"`.                                                    |

## Similar Components

- [NativePopover](https://yamada-ui.com/docs/components/native-popover.md): `NativePopover` is a component that floats around an element to display information using the HTML Popover API.
- [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information.
- [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element.
- [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen.
- [Menu](https://yamada-ui.com/docs/components/menu.md): `Menu` is a component that displays a common dropdown menu.
- [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.

## Uses Components & Hooks

- [Button](https://yamada-ui.com/docs/components/button.md): `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
- [CloseButton](https://yamada-ui.com/docs/components/close-button.md): `CloseButton` is a component used primarily to trigger the close functionality of a component.
- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.
- [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information.
- [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy.

- [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`.
- [useDisclosure](https://yamada-ui.com/docs/hooks/use-disclosure.md): `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.