Filter Clear Button

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

Events

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, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.