Density

Toolbar

Toolbar composes Base UI’s toolbar primitives for top-of-page controls. Density attributes are applied to toolbar buttons and toolbar inputs.

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

export default function ToolbarExample() {
  return (
    <Toolbar.Root aria-label="Document actions">
      <Toolbar.Group style={styles.group}>
        <Toolbar.Button type="button">Undo</Toolbar.Button>
        <Toolbar.Button type="button">Redo</Toolbar.Button>
      </Toolbar.Group>
      <Toolbar.Separator />
      <Toolbar.Group style={styles.group}>
        <Toolbar.Button type="button" density-emphasis="primary">
          Publish
        </Toolbar.Button>
        <Toolbar.Button type="button">Preview</Toolbar.Button>
      </Toolbar.Group>
    </Toolbar.Root>
  );
}

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

Props

Prop Attribute Values Default
Toolbar.Root density-level data-dn-level 1, 2, 3, 4, 5, 6, 7 3
Toolbar.Root density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl lg
Toolbar.Group None Base UI group props None
Toolbar.Link None Base UI link props None
Toolbar.Separator None Base UI separator props None
Toolbar.Button density-presentation data-dn-presentation button button
Toolbar.Button density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
Toolbar.Button density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl lg
Toolbar.Input density-presentation data-dn-presentation input input
Toolbar.Input density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl lg

Emphasis

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

export default function ToolbarEmphasisExample() {
  return (
    <Toolbar.Root aria-label="Toolbar emphasis examples">
      <Toolbar.Button type="button" density-emphasis="primary">
        Primary
      </Toolbar.Button>
      <Toolbar.Button type="button" density-emphasis="secondary">
        Secondary
      </Toolbar.Button>
      <Toolbar.Button type="button" density-emphasis="outline">
        Outline
      </Toolbar.Button>
      <Toolbar.Button type="button" density-emphasis="ghost">
        Ghost
      </Toolbar.Button>
    </Toolbar.Root>
  );
}

Size

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

const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const;

export default function ToolbarSizeExample() {
  return (
    <Toolbar.Root aria-label="Toolbar size examples">
      {sizes.map((size) => (
        <Toolbar.Button key={size} type="button" density-size={size}>
          {size}
        </Toolbar.Button>
      ))}
    </Toolbar.Root>
  );
}

Render prop

Toolbar buttons pass Base UI render props through normally.

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

export default function ToolbarRenderExample() {
  return (
    <Toolbar.Root aria-label="Toolbar render prop example">
      <Toolbar.Button
        render={(buttonProps) => (
          <button {...buttonProps} type="button">
            Rendered button
          </button>
        )}
      />
    </Toolbar.Root>
  );
}