Saved Filter

Persisted filter configuration.

html

<div class="savedfilter" style="--accent:#D9C8F0;">
  <div class="savedfilter__head">
    <h3 class="savedfilter__name">My open bugs</h3>
    <span class="savedfilter__badge">Shared</span>
  </div>
  <p class="savedfilter__summary">Status = Open</p>
  <div class="savedfilter__actions">
    <button type="button" class="savedfilter__apply">Apply</button>
    <button type="button" class="savedfilter__edit">Edit</button>
    <button type="button" class="savedfilter__delete">Delete</button>
  </div>
</div>
<style>
.savedfilter { font: 14px system-ui, sans-serif; color: #241430; max-width: 300px; border: 1.5px solid #24143020; border-radius: 10px; padding: 14px 16px; }
.savedfilter__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.savedfilter__name { margin: 0; font-size: 15px; font-weight: 600; }
.savedfilter__badge { font-size: 11px; font-weight: 600; background: var(--accent); color: #241430; padding: 2px 8px; border-radius: 999px; }
.savedfilter__summary { margin: 0 0 12px; font-size: 13px; color: #24143099; }
.savedfilter__actions { display: flex; gap: 8px; }
.savedfilter__apply { border: none; background: var(--accent); color: #241430; padding: 7px 12px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500; }
.savedfilter__edit, .savedfilter__delete { border: 1.5px solid #24143020; background: transparent; color: #241430; padding: 7px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
.savedfilter__apply:hover, .savedfilter__apply:focus-visible { opacity: .85; outline: none; }
.savedfilter__edit:hover, .savedfilter__edit:focus-visible, .savedfilter__delete:hover, .savedfilter__delete:focus-visible { background: #24143010; outline: none; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[300px] border-[1.5px] border-[#24143020] rounded-[10px] px-4 py-3.5">
  <div class="flex items-center gap-2 mb-1">
    <h3 class="m-0 text-[15px] font-semibold">My open bugs</h3>
    <span class="text-[11px] font-semibold text-[#241430] px-2 py-0.5 rounded-full savedfilter-badge-tw">Shared</span>
  </div>
  <p class="m-0 mb-3 text-[13px] text-[#24143099]">Status = Open</p>
  <div class="flex gap-2">
    <button type="button" class="border-none text-[#241430] px-3 py-1.5 rounded-md cursor-pointer font-medium savedfilter-apply-tw">Apply</button>
    <button type="button" class="border-[1.5px] border-[#24143020] bg-transparent text-[#241430] px-3 py-1.5 rounded-md cursor-pointer hover:bg-[#24143010] focus-visible:outline-none">Edit</button>
    <button type="button" class="border-[1.5px] border-[#24143020] bg-transparent text-[#241430] px-3 py-1.5 rounded-md cursor-pointer hover:bg-[#24143010] focus-visible:outline-none">Delete</button>
  </div>
</div>
<style>
.savedfilter-badge-tw { background: #D9C8F0; }
.savedfilter-apply-tw { background: #D9C8F0; }
.savedfilter-apply-tw:hover, .savedfilter-apply-tw:focus-visible { opacity: .85; outline: none; }
</style>

react

export function SavedFilter({
  name = "My open bugs",
  shared = true,
  summary = "Status = Open",
  accent = "#D9C8F0",
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 300, border: "1.5px solid #24143020", borderRadius: 10, padding: "14px 16px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{name}</h3>
        {shared && <span style={{ fontSize: 11, fontWeight: 600, background: accent, color: "#241430", padding: "2px 8px", borderRadius: 999 }}>Shared</span>}
      </div>
      <p style={{ margin: "0 0 12px", fontSize: 13, color: "#24143099" }}>{summary}</p>
      <div style={{ display: "flex", gap: 8 }}>
        <button type="button" style={{ border: "none", background: accent, color: "#241430", padding: "7px 12px", borderRadius: 6, cursor: "pointer", fontWeight: 500 }}>Apply</button>
        <button type="button" style={{ border: "1.5px solid #24143020", background: "transparent", color: "#241430", padding: "7px 12px", borderRadius: 6, cursor: "pointer" }}>Edit</button>
        <button type="button" style={{ border: "1.5px solid #24143020", background: "transparent", color: "#241430", padding: "7px 12px", borderRadius: 6, cursor: "pointer" }}>Delete</button>
      </div>
    </div>
  );
}