Deselect

Remove selection.

html

<div class="deselect-demo" data-method="click-again" style="--accent:#F5C2E0;">
  <div class="deselect-demo__row">
    <button type="button" class="deselect-demo__chip is-selected" aria-pressed="true">
      <span class="deselect-demo__check">&#10003;</span>Blue
      <span class="deselect-demo__x">&times;</span>
    </button>
  </div>
  <p class="deselect-demo__hint"></p>
</div>
<style>
.deselect-demo { width: 280px; font: 14px system-ui, sans-serif; color: #241430; }
.deselect-demo__chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #24143033; background: #FAF7F2; font: inherit; cursor: pointer; }
.deselect-demo__chip.is-selected { background: var(--accent); border-color: var(--accent); font-weight: 600; }
.deselect-demo__x { opacity: .6; }
.deselect-demo__hint { margin-top: 12px; font-size: 12px; color: #241430aa; }
.deselect-demo[data-method="click-again"] .deselect-demo__hint::after { content: "click the chip again to deselect it"; }
.deselect-demo[data-method="clear-button"] .deselect-demo__hint::after { content: "the \00d7 clears the selection"; }
.deselect-demo[data-method="escape-key"] .deselect-demo__hint::after { content: "press Escape while focused to deselect"; }
</style>

tailwind

<div class="deselect-tw deselect-tw--click-again" style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <button type="button" aria-pressed="true" class="deselect-tw__chip is-selected inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full border-[1.5px]" style="border-color:#24143033;background:#FAF7F2">
    <span>&#10003;</span>Blue<span class="opacity-60">&times;</span>
  </button>
  <p class="deselect-tw__hint mt-3 text-xs text-[#241430aa]"></p>
</div>
<style>
.deselect-tw__chip.is-selected { background: #F5C2E0; border-color: #F5C2E0; font-weight: 600; }
.deselect-tw--click-again .deselect-tw__hint::after { content: "click the chip again to deselect it"; }
.deselect-tw--clear-button .deselect-tw__hint::after { content: "the \00d7 clears the selection"; }
.deselect-tw--escape-key .deselect-tw__hint::after { content: "press Escape while focused to deselect"; }
</style>

react

import { useState } from "react";

export function Deselect({
  itemLabel = "Blue",
  selected: initialSelected = true,
  method = "click-again",
  accent = "#F5C2E0",
}) {
  const [selected, setSelected] = useState(initialSelected);
  const hints = {
    "click-again": "click the chip again to deselect it",
    "clear-button": "the \u00d7 clears the selection",
    "escape-key": "press Escape while focused to deselect",
  };
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <button type="button" aria-pressed={selected} onClick={() => setSelected((s) => !s)}
        style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 14px", borderRadius: 999,
          border: "1.5px solid " + (selected ? accent : "#24143033"), background: selected ? accent : "#FAF7F2",
          fontWeight: selected ? 600 : 400, cursor: "pointer" }}>
        {selected && <span>&#10003;</span>}{itemLabel}{selected && <span style={{ opacity: .6 }}>&times;</span>}
      </button>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430aa" }}>{hints[method]}</p>
    </div>
  );
}