Size

Size is set with data-dn-size: 2xs, xs, sm, md, lg, xl, 2xl, or 3xl. Put it on a presentation to size that element, or on an ancestor to create a size scope for size-aware presentation descendants in its light DOM. An explicit descendant data-dn-size overrides the surrounding scope. Presentations outside a scope keep their root defaults.

export default function InheritedSizeScopeExample() {
  return (
    <div data-dn-size="lg">
      <span data-dn-presentation="label">Inherited label</span>
      <button data-dn-presentation="button">Inherited button</button>
      <button data-dn-presentation="button" data-dn-size="xs">
        Explicit xs override
      </button>
    </div>
  );
}

Size scopes do not cross React portals or Shadow DOM. Give an overlay its own explicit size, or use an overlay component that forwards the context into its portal.

2xs2xs inputButton

xsxs inputButton

smsm inputButton

mdmd inputButton

lglg inputButton

xlxl inputButton

2xl2xl inputButton

3xl3xl inputButton

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

export default function StyleSizeExample() {
  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) auto",
            }}
          >
            <span data-dn-presentation="label" data-dn-size="xs">
              {size}
            </span>
            <span
              data-dn-presentation="input"
              data-dn-emphasis="primary"
              data-dn-size={size}
            >
              {size} input
            </span>
            <span
              data-dn-presentation="button"
              data-dn-emphasis="secondary"
              data-dn-size={size}
            >
              Button
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}