Toggle

Generic binary/selected-state control.

html

<button type="button" class="icon-toggle icon-toggle--active" style="--accent:#E8A020;border-radius:10px;" aria-pressed="true" aria-label="Save for later">
  <svg class="icon-toggle__star" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" stroke-width="1.6"/></svg>
  <span>Saved</span>
</button>
<style>
.icon-toggle { display: inline-flex; align-items: center; gap: 8px; font: 500 14px system-ui, sans-serif; padding: 9px 16px; border: 1.5px solid #24143040; background: #FAF7F2; color: #241430; cursor: pointer; }
.icon-toggle__star { fill: none; stroke: #241430; }
.icon-toggle--active { background: color-mix(in srgb, var(--accent) 25%, #FAF7F2); border-color: var(--accent); }
.icon-toggle--active .icon-toggle__star { fill: var(--accent); stroke: var(--accent); }
.icon-toggle:hover:not(:disabled) { border-color: var(--accent); }
.icon-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-toggle:disabled { opacity: .5; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="icon-toggle-tw icon-toggle-tw--active inline-flex items-center gap-2 font-sans text-sm font-medium px-4 py-2.5 border-[1.5px] border-[#24143040] bg-[#FAF7F2] text-[#241430] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" style="border-radius:10px;--accent:#E8A020;" aria-pressed="true" aria-label="Save for later">
  <svg class="icon-toggle-tw__star" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" stroke-width="1.6"/></svg>
  <span>Saved</span>
</button>
<style>
.icon-toggle-tw__star { fill: none; stroke: #241430; }
.icon-toggle-tw--active { background: color-mix(in srgb, #E8A020 25%, #FAF7F2) !important; border-color: #E8A020 !important; }
.icon-toggle-tw--active .icon-toggle-tw__star { fill: #E8A020; stroke: #E8A020; }
.icon-toggle-tw:focus-visible { outline: 2px solid #E8A020; outline-offset: 2px; }
</style>

react

export function Toggle({
  label = "Save for later",
  pressed = true,
  accent = "#E8A020",
  radius = 10,
  disabled = false,
}) {
  return (
    <button type="button" aria-pressed={pressed} aria-label={label} disabled={disabled} style={{
      display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "system-ui, sans-serif", fontWeight: 500,
      fontSize: 14, padding: "9px 16px", borderRadius: radius,
      border: `1.5px solid ${pressed ? accent : "#24143040"}`,
      background: pressed ? `color-mix(in srgb, ${accent} 25%, #FAF7F2)` : "#FAF7F2",
      color: "#241430", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1,
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill={pressed ? accent : "none"} stroke={pressed ? accent : "#241430"} strokeWidth="1.6">
        <path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" />
      </svg>
      <span>{pressed ? "Saved" : "Save"}</span>
    </button>
  );
}