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, View } 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">
          <Button type="button" aria-label="Undo" square>
            <Undo2 aria-hidden="true" size={16} strokeWidth={1.75} />
          </Button>
          <Button type="button" aria-label="Redo" disabled square>
            <Redo2 aria-hidden="true" size={16} strokeWidth={1.75} />
          </Button>
        </ButtonGroup>
      }
      childrenMiddle={<span>My App</span>}
      childrenEnd={
        <View gap="sm" orientation="horizontal" padding={false}>
          <Button type="button">Preview</Button>
          <Button type="button" emphasis="primary">
            Publish
          </Button>
        </View>
      }
    />
  );
}

Depth

import { Skeleton, Toolbar, View } from "density-base-ui";

export default function ToolbarDepthExample() {
  return (
    <View>
      <Toolbar
        depth="1"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        depth="2"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        depth="3"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        depth="4"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        depth="5"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        depth="6"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        depth="7"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
    </View>
  );
}

function ToolbarSkeletonGroup() {
  return (
    <>
      <Skeleton style={{ width: "var(--dn-size-current-height)" }} />
      <Skeleton style={{ width: "var(--dn-size-current-height)" }} />
    </>
  );
}

function ToolbarMiddleSkeleton() {
  return (
    <Skeleton style={{ width: "calc(var(--dn-size-current-height) * 5)" }} />
  );
}

Size

import { Skeleton, Toolbar, View } from "density-base-ui";

export default function ToolbarSizeExample() {
  return (
    <View>
      <Toolbar
        size="2xs"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        size="xs"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        size="sm"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        size="md"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        size="lg"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        size="xl"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        size="2xl"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        size="3xl"
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
    </View>
  );
}

function ToolbarSkeletonGroup() {
  return (
    <>
      <Skeleton style={{ width: "var(--dn-size-current-height)" }} />
      <Skeleton style={{ width: "var(--dn-size-current-height)" }} />
    </>
  );
}

function ToolbarMiddleSkeleton() {
  return (
    <Skeleton style={{ width: "calc(var(--dn-size-current-height) * 5)" }} />
  );
}

Padding

import { Skeleton, Toolbar, View } from "density-base-ui";

export default function ToolbarPaddingExample() {
  return (
    <View>
      <Toolbar
        padding={false}
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
      <Toolbar
        childrenEnd={<ToolbarSkeletonGroup />}
        childrenMiddle={<ToolbarMiddleSkeleton />}
        childrenStart={<ToolbarSkeletonGroup />}
      />
    </View>
  );
}

function ToolbarSkeletonGroup() {
  return (
    <>
      <Skeleton style={{ width: "var(--dn-size-current-height)" }} />
      <Skeleton style={{ width: "var(--dn-size-current-height)" }} />
    </>
  );
}

function ToolbarMiddleSkeleton() {
  return (
    <Skeleton style={{ width: "calc(var(--dn-size-current-height) * 5)" }} />
  );
}