Size

Size is set with data-dn-size: 2xs, xs, sm, md, lg, xl, 2xl, or 3xl.

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

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