Edit Clear Filters

Name

Also known as (comma separated)

Brief definition Removes active filters.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Button label", "default": "Clear all filters" }, { "id": "count", "type": "number", "label": "Active count", "default": 2, "min": 0, "max": 9, "step": 1 }, { "id": "active", "type": "toggle", "label": "Filters present", "default": true }, { "id": "accent", "type": "color", "label": "Colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"clearbar\" style=\"--accent:{{accent}};\">\n <div class=\"clearbar__row\">\n <span class=\"chip\">Status: Open <button type=\"button\" class=\"chip__remove\" aria-label=\"Remove filter: Status — Open\">×</button></span>\n <span class=\"chip\">Owner: Me <button type=\"button\" class=\"chip__remove\" aria-label=\"Remove filter: Owner — Me\">×</button></span>\n </div>\n {{#if active}}\n <p class=\"clearbar__status\" role=\"status\">{{count}} filters applied</p>\n {{/if}}\n {{#unless active}}\n <p class=\"clearbar__status\" role=\"status\">No filters applied</p>\n {{/unless}}\n <button type=\"button\" class=\"clearbar__clear\"{{#unless active}} disabled{{/unless}}>{{label}}</button>\n</div>\n<style>\n.clearbar { font: 14px system-ui, sans-serif; color: #241430; max-width: 340px; }\n.clearbar__row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }\n.chip { display: inline-flex; align-items: center; gap: 6px; background: #24143010; border: 1.5px solid var(--accent); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 13px; }\n.chip__remove { border: none; background: transparent; cursor: pointer; width: 16px; height: 16px; border-radius: 50%; color: #241430; }\n.chip__remove:hover, .chip__remove:focus-visible { background: #24143020; outline: none; }\n.clearbar__status { margin: 0 0 10px; font-size: 13px; color: #24143099; }\n.clearbar__clear { border: 1.5px solid var(--accent); background: #FAF7F2; color: #241430; padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit; }\n.clearbar__clear:hover:not(:disabled), .clearbar__clear:focus-visible:not(:disabled) { background: var(--accent); outline: none; }\n.clearbar__clear:disabled { opacity: .5; cursor: not-allowed; }\n</style>", "tailwind": "<div class=\"font-sans text-sm text-[#241430] max-w-[340px]\">\n <div class=\"flex flex-wrap gap-2 mb-2.5\">\n <span class=\"inline-flex items-center gap-1.5 bg-[#24143010] border-[1.5px] rounded-full pl-2.5 pr-1.5 py-1 text-[13px] clearbar-chip-tw\">Status: Open <button type=\"button\" aria-label=\"Remove filter: Status — Open\" class=\"border-none bg-transparent cursor-pointer w-4 h-4 rounded-full text-[#241430] hover:bg-[#24143020] focus-visible:outline-none focus-visible:bg-[#24143020]\">×</button></span>\n <span class=\"inline-flex items-center gap-1.5 bg-[#24143010] border-[1.5px] rounded-full pl-2.5 pr-1.5 py-1 text-[13px] clearbar-chip-tw\">Owner: Me <button type=\"button\" aria-label=\"Remove filter: Owner — Me\" class=\"border-none bg-transparent cursor-pointer w-4 h-4 rounded-full text-[#241430] hover:bg-[#24143020] focus-visible:outline-none focus-visible:bg-[#24143020]\">×</button></span>\n </div>\n {{#if active}}\n <p class=\"mb-2.5 text-[13px] text-[#24143099]\" role=\"status\">{{count}} filters applied</p>\n {{/if}}\n {{#unless active}}\n <p class=\"mb-2.5 text-[13px] text-[#24143099]\" role=\"status\">No filters applied</p>\n {{/unless}}\n <button type=\"button\"{{#unless active}} disabled{{/unless}} class=\"border-[1.5px] bg-[#FAF7F2] text-[#241430] px-3.5 py-2 rounded-md cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none clearbar-clear-tw\">{{label}}</button>\n</div>\n<style>\n.clearbar-chip-tw { border-color: {{accent}}; }\n.clearbar-clear-tw { border-color: {{accent}}; }\n.clearbar-clear-tw:hover:not(:disabled), .clearbar-clear-tw:focus-visible:not(:disabled) { background: {{accent}}; }\n</style>", "react": "export function ClearFilters({\n label = \"{{label}}\",\n count = {{count}},\n active = {{active}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", maxWidth: 340 }}>\n <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8, marginBottom: 10 }}>\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, background: \"#24143010\", border: `1.5px solid ${accent}`, borderRadius: 999, padding: \"4px 6px 4px 10px\", fontSize: 13 }}>\n Status: Open\n <button type=\"button\" aria-label=\"Remove filter: Status — Open\" style={{ border: \"none\", background: \"transparent\", cursor: \"pointer\", width: 16, height: 16, borderRadius: \"50%\", color: \"#241430\" }}>×</button>\n </span>\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, background: \"#24143010\", border: `1.5px solid ${accent}`, borderRadius: 999, padding: \"4px 6px 4px 10px\", fontSize: 13 }}>\n Owner: Me\n <button type=\"button\" aria-label=\"Remove filter: Owner — Me\" style={{ border: \"none\", background: \"transparent\", cursor: \"pointer\", width: 16, height: 16, borderRadius: \"50%\", color: \"#241430\" }}>×</button>\n </span>\n </div>\n <p role=\"status\" style={{ margin: \"0 0 10px\", fontSize: 13, color: \"#24143099\" }}>\n {active ? `${count} filters applied` : \"No filters applied\"}\n </p>\n <button type=\"button\" disabled={!active} style={{\n border: `1.5px solid ${accent}`, background: \"#FAF7F2\", color: \"#241430\", padding: \"8px 14px\",\n borderRadius: 6, cursor: active ? \"pointer\" : \"not-allowed\", opacity: active ? 1 : 0.5,\n }}>{label}</button>\n </div>\n );\n}" }