Presentation

Presentations are reusable element shapes exposed through data-dn-presentation.

Inherited size

A size scope on an ancestor applies to size-aware presentations in its light DOM. Give a descendant its own data-dn-size when it needs a different scale.

Inherited labelInherited inputInherited buttonExplicit xs override

export default function InheritedSizePresentationExample() {
  return (
    <div style={{ width: "100%" }}>
      <div
        data-dn-size="lg"
        style={{ display: "grid", gap: "var(--dn-size-current-control-gap)" }}
      >
        <span data-dn-presentation="label">Inherited label</span>
        <span data-dn-presentation="input">Inherited input</span>
        <span data-dn-presentation="button">Inherited button</span>
        <span data-dn-presentation="button" data-dn-size="xs">
          Explicit xs override
        </span>
      </div>
    </div>
  );
}

Button

Button presentation

export default function ButtonPresentationExample() {
  return (
    <div style={{ width: "100%" }}>
      <span data-dn-presentation="button" data-dn-emphasis="secondary">
        Button presentation
      </span>
    </div>
  );
}

Button group

The button group presentation joins adjacent button presentations into a single segmented control.

export default function ButtonGroupPresentationExample() {
  return (
    <div style={{ width: "100%" }}>
      <div data-dn-presentation="button-group" aria-label="Text alignment">
        <button
          type="button"
          data-dn-presentation="button"
          data-dn-emphasis="primary"
        >
          Left
        </button>
        <button type="button" data-dn-presentation="button">
          Center
        </button>
        <button type="button" data-dn-presentation="button">
          Right
        </button>
      </div>
    </div>
  );
}

Input

Input presentation

export default function InputPresentationExample() {
  return (
    <div style={{ width: "100%" }}>
      <span data-dn-presentation="input">Input presentation</span>
    </div>
  );
}

Card

The card presentation adds slight padding, rounded corners, and a subtle shadow.

Card presentationA compact surface for cards, popovers, and dropdowns.

export default function CardPresentationExample() {
  return (
    <div style={{ width: "100%" }}>
      <div data-dn-presentation="card" data-dn-depth="2">
        <span
          data-dn-presentation="label"
          data-dn-size="md"
          style={{ display: "block" }}
        >
          Card presentation
        </span>
        <span
          data-dn-emphasis="secondary"
          data-dn-presentation="label"
          data-dn-size="sm"
        >
          A compact surface for cards, popovers, and dropdowns.
        </span>
      </div>
    </div>
  );
}

Label

The label presentation applies Density typography to text-only elements. It supports every data-dn-size value and primary or secondary emphasis.

2xsPrimary labelSecondary label

xsPrimary labelSecondary label

smPrimary labelSecondary label

mdPrimary labelSecondary label

lgPrimary labelSecondary label

xlPrimary labelSecondary label

2xlPrimary labelSecondary label

3xlPrimary labelSecondary label

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

export default function LabelPresentationExample() {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
        {sizeValues.map((size) => (
          <div
            key={size}
            style={{
              alignItems: "center",
              display: "grid",
              gap: "0.75rem",
              gridTemplateColumns: "3rem minmax(0, 1fr) minmax(0, 1fr)",
            }}
          >
            <span data-dn-presentation="label" data-dn-size="xs">
              {size}
            </span>
            <span
              data-dn-emphasis="primary"
              data-dn-presentation="label"
              data-dn-size={size}
            >
              Primary label
            </span>
            <span
              data-dn-emphasis="secondary"
              data-dn-presentation="label"
              data-dn-size={size}
            >
              Secondary label
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

Number

The number presentation applies monospaced tabular number typography for metrics, counters, and other changing numeric values.

123,456.78

export default function NumberPresentationExample() {
  return (
    <div style={{ width: "100%" }}>
      <span data-dn-presentation="number">123,456.78</span>
    </div>
  );
}