Density

Button

The button wraps Base UI’s button component with Density’s shared control attributes.

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

export default function ButtonExample() {
  return <Button type="button">Save changes</Button>;
}

Props

Prop Attribute Values Default
presentation data-dn-presentation button button
emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
selected data-selected Boolean false
rounded Inline style Boolean false
square Inline style Boolean false

Emphasis

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

export default function ButtonEmphasisExample() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
      <Button type="button" emphasis="primary">
        Primary
      </Button>
      <Button type="button" emphasis="secondary">
        Secondary
      </Button>
      <Button type="button" emphasis="outline">
        Outline
      </Button>
      <Button type="button" emphasis="ghost">
        Ghost
      </Button>
    </div>
  );
}

Selected

Use selected for persistent choices. It is separate from pointer active and keyboard focus states, and works with every emphasis.

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

export default function ButtonSelectedExample() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
      <Button type="button" emphasis="primary" selected>
        Primary
      </Button>
      <Button type="button" emphasis="secondary" selected>
        Secondary
      </Button>
      <Button type="button" emphasis="outline" selected>
        Outline
      </Button>
      <Button type="button" emphasis="ghost" selected>
        Ghost
      </Button>
    </div>
  );
}

Size

Button sizes use the shared Density control scale: 2xs, xs, sm, md, lg, xl, 2xl, and 3xl. A button and input with the same size have the same height.

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

export default function ButtonSizeExample() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
      <Button type="button" size="2xs">
        2xs
      </Button>
      <Button type="button" size="xs">
        xs
      </Button>
      <Button type="button" size="sm">
        sm
      </Button>
      <Button type="button" size="md">
        md
      </Button>
      <Button type="button" size="lg">
        lg
      </Button>
      <Button type="button" size="xl">
        xl
      </Button>
      <Button type="button" size="2xl">
        2xl
      </Button>
      <Button type="button" size="3xl">
        3xl
      </Button>
    </div>
  );
}

Shape

Use rounded for pill buttons and square for icon-only buttons. Combine them for circular icon buttons.

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

export default function ButtonShapeExample() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
      <Button type="button">Default</Button>
      <Button type="button" rounded>
        Rounded
      </Button>
      <Button type="button" square aria-label="Square button">
        +
      </Button>
      <Button type="button" rounded square aria-label="Rounded square button">
        +
      </Button>
    </div>
  );
}