Emphasis

Emphasis is set with data-dn-emphasis: primary, secondary, outline, or ghost.

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

export default function StyleEmphasisExample() {
  return (
    <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 style={{ color: "var(--dn-color-text)", fontSize: "13px" }}>
            {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>
  );
}