Search Token

Structured portion of a query.

html

<span class="stoken stoken--status" style="outline-color:#A8E6C1;">
  <svg class="stoken__icon" width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/></svg>
  <span class="stoken__text">status:<b>open</b></span>
  <button type="button" class="stoken__remove" aria-label="Remove filter: status — open">
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
  </button>
</span>
<style>
.stoken { display: inline-flex; align-items: center; gap: 5px; font: 13px system-ui, sans-serif; color: #241430; padding: 5px 6px 5px 9px; border-radius: 999px; border: 1px solid transparent; }
.stoken:focus-within { outline: 2px solid; outline-offset: 2px; }
.stoken--status { background: #A8E6C140; color: #1c5c37; }
.stoken--assignee { background: #BFD9F250; color: #1c3d5c; }
.stoken--label { background: #F5C2E050; color: #5c1c47; }
.stoken__icon { flex: none; }
.stoken__text { white-space: nowrap; }
.stoken__remove { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: #24143014; color: inherit; cursor: pointer; }
.stoken__remove:hover { background: #24143028; }
</style>

tailwind

<span class="stoken-tw stoken-tw--status inline-flex items-center gap-1.5 font-sans text-[13px] pl-2.5 pr-1.5 py-1 rounded-full focus-within:outline focus-within:outline-2 focus-within:outline-offset-2" style="outline-color:#A8E6C1;">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true" class="flex-none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"></circle></svg>
  <span class="whitespace-nowrap">status:<b>open</b></span>
  <button type="button" aria-label="Remove filter: status — open" class="flex-none grid place-items-center w-4 h-4 rounded-full bg-[#24143014] hover:bg-[#24143028] text-inherit">
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path></svg>
  </button>
</span>
<style>
.stoken-tw--status { background: #A8E6C140; color: #1c5c37; }
.stoken-tw--assignee { background: #BFD9F250; color: #1c3d5c; }
.stoken-tw--label { background: #F5C2E050; color: #5c1c47; }
</style>

react

export function SearchToken({
  field = "status",
  value = "open",
  kind = "status",
  accent = "#A8E6C1",
}) {
  const styles = {
    status: { background: "#A8E6C140", color: "#1c5c37" },
    assignee: { background: "#BFD9F250", color: "#1c3d5c" },
    label: { background: "#F5C2E050", color: "#5c1c47" },
  };
  const kindStyle = styles[kind] ?? styles.status;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "system-ui, sans-serif", fontSize: 13,
      padding: "5px 6px 5px 9px", borderRadius: 999, ...kindStyle,
    }}>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ flex: "none" }}>
        <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" />
      </svg>
      <span style={{ whiteSpace: "nowrap" }}>{field}:<b>{value}</b></span>
      <button type="button" aria-label={`Remove filter: ${field} — ${value}`} style={{
        flex: "none", display: "grid", placeItems: "center", width: 16, height: 16, border: "none",
        borderRadius: "50%", background: "#24143014", color: "inherit", cursor: "pointer",
      }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="3" strokeLinecap="round" /></svg>
      </button>
    </span>
  );
}