Save

Persists changes.

html

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

tailwind

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

react

export function SaveButton({
  label = "Save",
  busy = false,
  bg = "#241430",
  radius = 10,
  disabled = false,
}) {
  return (
    <>
      <button
        type="button"
        aria-busy={busy}
        disabled={disabled}
        style={{
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 8,
          minWidth: 110,
          padding: "11px 20px",
          borderRadius: radius,
          border: "none",
          background: bg,
          color: "#FAF7F2",
          font: "600 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="save-spin" aria-hidden="true">
            <circle cx="12" cy="12" r="9" strokeOpacity=".25" />
            <path d="M21 12a9 9 0 00-9-9" />
          </svg>
        )}
        {busy ? "Saving" : label}
      </button>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .save-spin { animation: save-spin .8s linear infinite; }
          @keyframes save-spin { to { transform: rotate(360deg); } }
        }
      `}</style>
    </>
  );
}