Submit

Submits a form/action.

html

<form class="submit-demo">
  <button type="submit" class="btn-submit" style="--bg:#241430;border-radius:10px" aria-busy="false">
    
    Create account
    
  </button>
</form>
<style>
.submit-demo { display: inline-block; }
.btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 170px;
  font: 700 15px/1 system-ui, sans-serif;
  padding: 12px 22px;
  border: none;
  background: var(--bg);
  color: #FAF7F2;
  cursor: pointer;
}
.btn-submit:hover:not(:disabled) { filter: brightness(1.1); }
.btn-submit:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }
.btn-submit__spinner { display: inline-flex; }
@keyframes btn-submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .btn-submit__spinner { animation: btn-submit-spin .2s linear infinite; }
}
</style>

tailwind

<form class="inline-block">
  <button type="submit" class="inline-flex items-center justify-center gap-2 min-w-[170px] text-sm font-bold text-[#FAF7F2] border-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:brightness-110 btn-submit-tw" style="background:#241430;border-radius:10px" aria-busy="false">
    
    Create account
    
  </button>
</form>

react

export function SubmitButton({
  label = "Create account",
  busy = false,
  bg = "#241430",
  radius = 10,
  disabled = false,
}) {
  return (
    <form style={{ display: "inline-block" }}>
      <button
        type="submit"
        aria-busy={busy}
        disabled={disabled}
        style={{
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 8,
          minWidth: 170,
          padding: "12px 22px",
          borderRadius: radius,
          border: "none",
          background: bg,
          color: "#FAF7F2",
          font: "700 15px/1 system-ui, sans-serif",
          cursor: disabled ? "not-allowed" : "pointer",
          opacity: disabled ? 0.5 : 1,
        }}
      >
        {busy && (
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="submit-spin" aria-hidden="true">
            <circle cx="12" cy="12" r="9" strokeOpacity=".25" />
            <path d="M21 12a9 9 0 00-9-9" />
          </svg>
        )}
        {busy ? "Creating account" : label}
      </button>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .submit-spin { animation: submit-spin .8s linear infinite; }
          @keyframes submit-spin { to { transform: rotate(360deg); } }
        }
      `}</style>
    </form>
  );
}