Dock

Mobile

Tablet

Desktop

Usage

Dock is a floating, pill-shaped toolbar that animates in and out based on the isOpen prop. It uses a Prefix / Content / Suffix structure, so you can place a selection count on the left, the main actions in the middle, and a dismiss button on the right.

import { Dock } from "@blakeui/pro-react";
import { Button, Chip, Separator } from "@blakeui/react";
import { Icon } from "@iconify/react";

function BulkActions({ count, onClear }: { count: number; onClear: () => void }) {
  return (
    <Dock isOpen={count > 0}>
      <Dock.Prefix>
        <Chip size="sm" variant="secondary">
          {count}
        </Chip>
      </Dock.Prefix>

      <Separator className="h-5" orientation="vertical" />

      <Dock.Content>
        <Button size="sm" variant="ghost">
          <Icon height={16} icon="ic:twotone-edit" width={16} />
          Edit
        </Button>
        <Button size="sm" variant="ghost">
          <Icon height={16} icon="ic:twotone-download" width={16} />
          Export
        </Button>
      </Dock.Content>

      <Separator className="h-5" orientation="vertical" />

      <Dock.Suffix>
        <Button isIconOnly aria-label="Clear selection" size="sm" variant="ghost" onPress={onClear}>
          <Icon height={16} icon="ic:twotone-close" width={16} />
        </Button>
      </Dock.Suffix>
    </Dock>
  );
}

Controlled visibility

The bar mounts and unmounts through an animated enter/exit driven entirely by isOpen. Toggle it from any piece of state — for example, whether a selection exists.

import { Dock } from "@blakeui/pro-react";
import { Button, Chip, Separator } from "@blakeui/react";
import { useState } from "react";

function Demo() {
  const [count, setCount] = useState(2);
  const open = count > 0;

  return (
    <>
      <Button variant="secondary" onPress={() => setCount(open ? 0 : 2)}>
        {open ? "Clear selection" : "Select 2 rows"}
      </Button>

      <Dock isOpen={open}>
        <Dock.Prefix>
          <Chip size="sm" variant="secondary">
            {count}
          </Chip>
        </Dock.Prefix>

        <Separator className="h-5" orientation="vertical" />

        <Dock.Content>
          <Button size="sm" variant="ghost">
            Edit
          </Button>
          <Button size="sm" variant="danger-soft">
            Delete
          </Button>
        </Dock.Content>
      </Dock>
    </>
  );
}

Sections

All three sections — Prefix, Content, and Suffix — are optional, and you can place a Separator from @blakeui/react between them. Use a vertical separator sized to the bar's height for a clean divider.

<Dock isOpen={hasSelection}>
  <Dock.Prefix>
    <Chip size="sm" variant="secondary">
      {count}
    </Chip>
  </Dock.Prefix>

  <Separator className="h-5" orientation="vertical" />

  <Dock.Content>
    <Button size="sm" variant="ghost">
      <Icon height={16} icon="ic:twotone-archive" width={16} />
      Archive
    </Button>
    <Button size="sm" variant="danger-soft">
      <Icon height={16} icon="ic:twotone-delete" width={16} />
      Delete
    </Button>
  </Dock.Content>

  <Separator className="h-5" orientation="vertical" />

  <Dock.Suffix>
    <Button isIconOnly aria-label="Clear selection" size="sm" variant="ghost" onPress={onClear}>
      <Icon height={16} icon="ic:twotone-close" width={16} />
    </Button>
  </Dock.Suffix>
</Dock>

Responsive labels

Add the dock__label CSS class to any text you want hidden on small screens. Below the sm breakpoint (640px) those elements become sr-only, so buttons collapse to icon-only while their labels stay accessible to screen readers.

<Button aria-label="Edit" size="sm" variant="ghost">
  <Icon height={16} icon="ic:twotone-edit" width={16} />
  <span className="dock__label">Edit</span>
</Button>

Anatomy

import { Dock } from "@blakeui/pro-react";
import { Button, Chip, Separator } from "@blakeui/react";
import { Icon } from "@iconify/react";

<Dock isOpen={hasSelection}>
  <Dock.Prefix>
    <Chip size="sm">{count}</Chip>
  </Dock.Prefix>
  <Separator className="h-5" orientation="vertical" />
  <Dock.Content>
    <Button size="sm" variant="ghost">Edit</Button>
    <Button size="sm" variant="ghost">Export</Button>
  </Dock.Content>
  <Separator className="h-5" orientation="vertical" />
  <Dock.Suffix>
    <Button isIconOnly aria-label="Clear" size="sm" variant="ghost" onPress={onClear}>
      <Icon height={16} icon="ic:twotone-close" width={16} />
    </Button>
  </Dock.Suffix>
</Dock>;

All three sections (Prefix, Content, Suffix) are optional. Use Separator from @blakeui/react between sections as needed.

CSS Classes

Base Classes

.dock — Outer positioning wrapper. Fixed to the viewport bottom-center with pointer-events: none.
.dock__wrapper — The visible pill surface. Restores pointer-events: auto and applies the overlay shadow.

Element Classes

.dock__prefix — Leading section (badges, counts).
.dock__content — Middle section for the main actions.
.dock__suffix — Trailing section (dismiss button).
.dock__label — Text that collapses to sr-only below 640px.

API Reference

Dock

The root component. Extends ToolbarProps from @blakeui/react.

Prop	Type	Default	Description
`isOpen`	`boolean`	—	Controls visibility with an animated enter/exit.
`aria-label`	`string`	`"Actions"`	Accessible label for the toolbar.
`isAttached`	`boolean`	`true`	Whether the toolbar has a surface background with full rounding.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the toolbar.
`className`	`string`	—	Additional CSS classes applied to the toolbar wrapper.
`children`	`ReactNode`	—	Content — typically `Prefix`, `Content`, `Suffix`, and `Separator` components.

Dock.Prefix

Leading section container.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content for the leading section (badges, counts, labels).
`className`	`string`	—	Additional CSS classes.

Dock.Content

Middle section container for the main actions.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Action buttons, dropdowns, etc.
`className`	`string`	—	Additional CSS classes.

Dock.Suffix

Trailing section container.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Dismiss button, secondary actions.
`className`	`string`	—	Additional CSS classes.

All other props are forwarded to the root Toolbar element.

Dock

On this page