Primary Button

Most important action.

html

<button type="button" class="btn-primary btn-primary--md" style="--bg:#241430;border-radius:10px">Continue</button>
<style>
.btn-primary {
  font: 700 15px/1 system-ui, sans-serif;
  padding: 12px 22px;
  border: none;
  background: var(--bg);
  color: #FAF7F2;
  cursor: pointer;
}
.btn-primary--lg { padding: 15px 28px; font-size: 16px; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn-primary:active:not(:disabled) { filter: brightness(0.92); }
.btn-primary:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="text-[#FAF7F2] border-none cursor-pointer font-bold disabled:opacity-45 disabled:cursor-not-allowed hover:brightness-110 active:brightness-90 btn-primary-tw btn-primary-tw--md" style="background:#241430;border-radius:10px">Continue</button>
<style>
.btn-primary-tw--md { padding: 12px 22px; font-size: 15px; }
.btn-primary-tw--lg { padding: 15px 28px; font-size: 16px; }
.btn-primary-tw--md:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function PrimaryButton({
  label = "Continue",
  size = "md",
  bg = "#241430",
  radius = 10,
  disabled = false,
}) {
  const lg = size === "lg";
  return (
    <button
      type="button"
      disabled={disabled}
      style={{
        padding: lg ? "15px 28px" : "12px 22px",
        fontSize: lg ? 16 : 15,
        borderRadius: radius,
        border: "none",
        background: bg,
        color: "#FAF7F2",
        fontWeight: 700,
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.45 : 1,
      }}
    >
      {label}
    </button>
  );
}