Size

Component scale variant.

html

<button type="button" class="sizedemo sizedemo--md" style="background:#241430;">
  <span class="sizedemo__icon" aria-hidden="true">&rarr;</span>
  Continue
</button>
<style>
.sizedemo { display: inline-flex; align-items: center; gap: 8px; border: none; color: #FAF7F2; font: 600 14px system-ui, sans-serif; cursor: pointer; box-sizing: border-box; }
.sizedemo--sm { padding: 6px 12px; border-radius: 6px; font-size: 12px; }
.sizedemo--md { padding: 12px 20px; border-radius: 9px; font-size: 14px; }
.sizedemo--lg { padding: 18px 30px; border-radius: 12px; font-size: 17px; }
.sizedemo:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<button type="button" class="sizedemotw sizedemotw--md inline-flex items-center gap-2 border-none text-[#FAF7F2] font-semibold cursor-pointer box-border" style="background:#241430;">
  <span aria-hidden="true">&rarr;</span>
  Continue
</button>
<style>
.sizedemotw--sm { padding: 6px 12px; border-radius: 6px; font-size: 12px; }
.sizedemotw--md { padding: 12px 20px; border-radius: 9px; font-size: 14px; }
.sizedemotw--lg { padding: 18px 30px; border-radius: 12px; font-size: 17px; }
</style>

react

export function Size({
  label = "Continue",
  size = "md",
  accent = "#241430",
  showIcon = true,
}) {
  const dims = {
    sm: { padding: "6px 12px", borderRadius: 6, fontSize: 12 },
    md: { padding: "12px 20px", borderRadius: 9, fontSize: 14 },
    lg: { padding: "18px 30px", borderRadius: 12, fontSize: 17 },
  }[size];
  return (
    <button type="button" style={{ display: "inline-flex", alignItems: "center", gap: 8, border: "none", color: "#FAF7F2", fontWeight: 600, cursor: "pointer", boxSizing: "border-box", background: accent, ...dims }}>
      {showIcon && <span aria-hidden="true">&rarr;</span>}
      {label}
    </button>
  );
}