Toggle Button

Button representing an on/off or selected state.

html

<button type="button" class="btn-toggle" style="--bg:#241430;border-radius:8px" aria-pressed="false"><strong>Bold</strong></button>
<style>
.btn-toggle {
  font: 600 14px/1 system-ui, sans-serif;
  padding: 9px 16px;
  border: 1.5px solid rgba(36,20,48,.25);
  background: #FAF7F2;
  color: #241430;
  cursor: pointer;
}
.btn-toggle[aria-pressed="true"] { background: var(--bg); border-color: var(--bg); color: #FAF7F2; }
.btn-toggle:hover:not(:disabled):not([aria-pressed="true"]) { background: rgba(36,20,48,.06); }
.btn-toggle:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-toggle:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="text-sm font-semibold bg-[#FAF7F2] text-[#241430] cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-black/5 btn-toggle-tw" style="border:1.5px solid rgba(36,20,48,.25);border-radius:8px;padding:9px 16px" aria-pressed="false"><strong>Bold</strong></button>
<style>
.btn-toggle-tw[aria-pressed="true"] { background: #241430; border-color: #241430; color: #FAF7F2; }
.btn-toggle-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function ToggleButton({
  label = "Bold",
  pressed = false,
  bg = "#241430",
  radius = 8,
  disabled = false,
}) {
  return (
    <button
      type="button"
      aria-pressed={pressed}
      disabled={disabled}
      style={{
        padding: "9px 16px",
        borderRadius: radius,
        border: `1.5px solid ${pressed ? bg : "rgba(36,20,48,.25)"}`,
        background: pressed ? bg : "#FAF7F2",
        color: pressed ? "#FAF7F2" : "#241430",
        font: "600 14px/1 system-ui, sans-serif",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
    >
      <strong>{label}</strong>
    </button>
  );
}