Density

Toolbar

Toolbar is a native div wrapper for three-part horizontal control layouts. Use childrenStart, children, and childrenEnd to place arbitrary content into start, centered middle, and end slots.

My App
import { Button, ButtonGroup, Toolbar } from "density-base-ui";
import { Redo2, Undo2 } from "lucide-react";

export default function ToolbarExample() {
  return (
    <Toolbar
      aria-label="Document actions"
      childrenStart={
        <ButtonGroup aria-label="Edit history" size="lg">
          <Button type="button" size="lg" aria-label="Undo" square>
            <Undo2 aria-hidden="true" size={16} strokeWidth={1.75} />
          </Button>
          <Button type="button" size="lg" aria-label="Redo" disabled square>
            <Redo2 aria-hidden="true" size={16} strokeWidth={1.75} />
          </Button>
        </ButtonGroup>
      }
      childrenMiddle={<span>My App</span>}
      childrenEnd={
        <div style={styles.group}>
          <Button type="button" emphasis="primary" size="lg">
            Publish
          </Button>
          <Button type="button" size="lg">
            Preview
          </Button>
        </div>
      }
      size="lg"
    />
  );
}

const styles = {
  group: {
    display: "flex",
    gap: "0.375rem",
  },
} as const;

Props

Prop Attribute Values Default
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl lg
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
childrenStart None ReactNode None
children None ReactNode None
childrenEnd None ReactNode None
Other native div props Mixed HTMLAttributes<HTMLDivElement> None

Depth

import { Toolbar } from "density-base-ui";

export default function ToolbarDepthExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Toolbar depth="1">Depth 1</Toolbar>
      <Toolbar depth="2">Depth 2</Toolbar>
      <Toolbar depth="3">Depth 3</Toolbar>
      <Toolbar depth="4">Depth 4</Toolbar>
      <Toolbar depth="5">Depth 5</Toolbar>
      <Toolbar depth="6">Depth 6</Toolbar>
      <Toolbar depth="7">Depth 7</Toolbar>
    </div>
  );
}

Size

import { Toolbar } from "density-base-ui";

export default function ToolbarSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Toolbar size="2xs">2xs</Toolbar>
      <Toolbar size="xs">xs</Toolbar>
      <Toolbar size="sm">sm</Toolbar>
      <Toolbar size="md">md</Toolbar>
      <Toolbar size="lg">lg</Toolbar>
      <Toolbar size="xl">xl</Toolbar>
      <Toolbar size="2xl">2xl</Toolbar>
      <Toolbar size="3xl">3xl</Toolbar>
    </div>
  );
}

Padding

import { Toolbar } from "density-base-ui";

export default function ToolbarPaddingExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Toolbar padding="none">None</Toolbar>
      <Toolbar padding="2xs">2xs</Toolbar>
      <Toolbar padding="xs">xs</Toolbar>
      <Toolbar padding="sm">sm</Toolbar>
      <Toolbar padding="md">md</Toolbar>
      <Toolbar padding="lg">lg</Toolbar>
      <Toolbar padding="xl">xl</Toolbar>
      <Toolbar padding="2xl">2xl</Toolbar>
      <Toolbar padding="3xl">3xl</Toolbar>
    </div>
  );
}

Arbitrary children

Toolbar slot props render plain React nodes.

import { Toolbar } from "density-base-ui";

export default function ToolbarRenderExample() {
  return (
    <Toolbar aria-label="Toolbar native button example" size="lg">
      <button type="button" data-dn-presentation="button">
        Native button
      </button>
    </Toolbar>
  );
}