button

Interactive action control.

A real <button type="submit"> inside a form — its type decides what it does when pressed.

html

<form class="btn-demo" onsubmit="return false">
  <p class="btn-demo__hint">A real <code>&lt;button type="submit"&gt;</code> inside a form — its type decides what it does when pressed.</p>
  <button class="btn-el" type="submit" style="--accent:#241430;">Submit order</button>
</form>
<style>
.btn-demo { width: 320px; box-sizing: border-box; font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; }
.btn-demo__hint { margin: 0 0 14px; font-size: 13px; color: #241430aa; }
.btn-demo__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
.btn-el { font: 600 15px system-ui, sans-serif; padding: 11px 22px; border-radius: 8px; border: 2px solid var(--accent); background: var(--accent); color: #FAF7F2; cursor: pointer; }
.btn-el:hover:not(:disabled) { opacity: .85; }
.btn-el:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<form class="w-[320px] box-border font-sans text-[15px] text-[#241430] bg-[#FAF7F2] p-5 rounded-xl" onsubmit="return false">
  <p class="m-0 mb-3.5 text-[13px] text-[#241430]/65">A real <code class="bg-[#24143012] px-1.5 py-0.5 rounded">&lt;button type="submit"&gt;</code> inside a form — its type decides what it does when pressed.</p>
  <button type="submit" class="font-semibold text-[15px] px-[22px] py-[11px] rounded-lg border-2 text-[#FAF7F2] cursor-pointer hover:opacity-85 disabled:opacity-40 disabled:cursor-not-allowed" style="border-color:#241430;background:#241430;">Submit order</button>
</form>

react

export function ButtonElement({
  label = "Submit order",
  type = "submit",
  accent = "#241430",
  disabled = false,
}) {
  return (
    <form style={{ width: 320, boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12 }} onSubmit={(e) => e.preventDefault()}>
      <p style={{ margin: "0 0 14px", fontSize: 13, color: "#241430aa" }}>
        A real <code style={{ background: "#24143012", padding: "1px 5px", borderRadius: 4 }}>{`<button type="${type}">`}</code> inside a form — its type decides what it does when pressed.
      </p>
      <button
        type={type}
        disabled={disabled}
        style={{ font: "600 15px system-ui, sans-serif", padding: "11px 22px", borderRadius: 8, border: `2px solid ${accent}`, background: accent, color: "#FAF7F2", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.4 : 1 }}
      >
        {label}
      </button>
    </form>
  );
}