Components Clear

Clear

A button that clears the query, the active refinements, or both when pressed.

🕹 try out live

Usage

Basic usage:

<ais-clear></ais-clear>

Overriding the default button text:

<ais-clear>
	<template>
		Clear search query
	</template>
</ais-clear>

Only clear the search query:

<ais-clear :clears-facets="false"></ais-clear>

Only clear the facet refinements:

<ais-clear :clears-query="false"></ais-clear>

Props

Name	Type	Default	Description
clears-query	boolean	true	If true, when the button is clicked, the query will be emptied.
clears-facets	boolean	true	If true, when the button is clicked, all the facet refinements will be removed.

Slots

Name	Props	Default	Description
default	query	<span class="ais-clear__label">Clear</span>	The text displayed inside the clear button.

CSS Classes

ClassName	Description
ais-clear	Button class
ais-clear__label	Button text class