GitHub

Filter Clear Button

Ghost/link-style button that clears all active filters. Optional leading filter-x icon, customizable label, and a bubbling esa-filter-clear event on click.

Stable .astro import EsaFilterClearButton from '@esa/ecology/esa-filter-clear-button.astro';

Preview

<FilterClearButton />

Variants

Override the label, and drop the icon for a plain link-style action.

<FilterClearButton label="Reset filters" />
<FilterClearButton label="Clear all" showIcon={false} />

API

PropTypeDefaultDescription
label string 'Clear all' Visible button text.
showIcon boolean true Show the leading filter-x icon.
hidden boolean false Suppress rendering entirely (renders no DOM).

Events

PropTypeDefaultDescription
esa-filter-clear (no detail) — Bubbling/composed. Fires on click so a parent container can clear all active filters.

Accessibility

  • Renders a native <button> with a fixed aria-label="Clear all filters", so the name is stable even when label changes.
  • The leading icon is aria-hidden — decorative only.
  • Hover applies a subtle overlay; focus-visible shows a 2px primary outline via --focus-ring-* tokens.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

TokenTierResolves to
--filter-clear-color component #838383 via --color-text-muted → --color-gray-10
--filter-clear-color-hover component #ce2c31 via --color-danger-strong → --color-red-11
--focus-ring-color component #65ba74 via --color-border-focus → --color-grass-8
--focus-ring-width component 2px
--color-hover-overlay semantic rgba(0, 0, 0, 0.03)
--focus-ring-offset semantic 2px
--font-sans semantic 'DM Sans', sans-serif
--transition-fast semantic 150ms ease
--type-size-150 semantic clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem)
--font-weight-medium primitive 500
--radius-100 primitive 0.25rem
--spacing-100 primitive 0.25rem
--spacing-200 primitive 0.5rem