Undo

Reverses a previous operation.

html

<button type="button" class="btn-undo btn-undo--iconOnly" style="--bg:#241430;border-radius:8px" aria-label="Undo">
  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 10h9a5 5 0 110 10H9M4 10l4-4M4 10l4 4"/></svg>
  
</button>
<style>
.btn-undo {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 14px/1 system-ui, sans-serif;
  padding: 8px 14px;
  border: 1.5px solid rgba(36,20,48,.25);
  background: #FAF7F2;
  color: #241430;
  cursor: pointer;
}
.btn-undo--iconOnly { padding: 8px; }
.btn-undo:hover:not(:disabled) { color: var(--bg); border-color: var(--bg); }
.btn-undo:active:not(:disabled) { background: rgba(36,20,48,.06); }
.btn-undo:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-undo:disabled { opacity: .35; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="inline-flex items-center gap-1.75 text-sm font-semibold bg-[#FAF7F2] text-[#241430] cursor-pointer disabled:opacity-35 disabled:cursor-not-allowed btn-undo-tw btn-undo-tw--iconOnly" style="border:1.5px solid rgba(36,20,48,.25);border-radius:8px" aria-label="Undo">
  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 10h9a5 5 0 110 10H9M4 10l4-4M4 10l4 4"/></svg>
  
</button>
<style>
.btn-undo-tw { padding: 8px 14px; }
.btn-undo-tw--iconOnly { padding: 8px; }
.btn-undo-tw:hover:not(:disabled) { color: #241430; border-color: #241430; }
.btn-undo-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function UndoButton({
  label = "Undo",
  iconOnly = true,
  bg = "#241430",
  radius = 8,
  disabled = false,
}) {
  return (
    <button
      type="button"
      aria-label={iconOnly ? label : undefined}
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 7,
        padding: iconOnly ? 8 : "8px 14px",
        borderRadius: radius,
        border: "1.5px solid rgba(36,20,48,.25)",
        background: "#FAF7F2",
        color: "#241430",
        font: "600 14px/1 system-ui, sans-serif",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.35 : 1,
      }}
    >
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M4 10h9a5 5 0 110 10H9M4 10l4-4M4 10l4 4" />
      </svg>
      {!iconOnly && <span>{label}</span>}
    </button>
  );
}