Emphasis

Emphasis is set with data-dn-emphasis. Controls support primary, secondary, outline, and ghost; labels support primary and secondary. Put it on an ancestor to create an emphasis scope for emphasis-aware presentation descendants in its light DOM. An explicit descendant attribute overrides the scope, while presentations outside a scope keep their root defaults.

export default function InheritedEmphasisScopeExample() {
  return (
    <div data-dn-emphasis="primary">
      <button data-dn-presentation="button">Inherited primary button</button>
      <div data-dn-emphasis="secondary">
        <button data-dn-presentation="button">
          Inherited nested secondary button
        </button>
      </div>
      <button data-dn-presentation="button" data-dn-emphasis="ghost">
        Explicit ghost override
      </button>
    </div>
  );
}

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

Primary scopeInherited primary inputInherited primary button

Nested secondary scopeInherited nested secondary inputInherited nested secondary button

Explicit ghost override

primaryprimary inputButton

secondarysecondary inputButton

outlineoutline inputButton

ghostghost inputButton

const emphasisValues = ["primary", "secondary", "outline", "ghost"] as const;

export default function StyleEmphasisExample() {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
        {emphasisValues.map((emphasis) => (
          <div
            key={emphasis}
            style={{
              alignItems: "center",
              display: "grid",
              gap: "0.75rem",
              gridTemplateColumns: "7rem minmax(0, 1fr) auto",
            }}
          >
            <span data-dn-presentation="label" data-dn-size="xs">
              {emphasis}
            </span>
            <span
              data-dn-presentation="input"
              data-dn-emphasis={emphasis}
              data-dn-size="md"
            >
              {emphasis} input
            </span>
            <span
              data-dn-presentation="button"
              data-dn-emphasis={emphasis}
              data-dn-size="md"
            >
              Button
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}