InstantSearch specs

✏️ edit page

RelevantSort

Widget example

We removed some search results to show you the most relevant ones

HTML output

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    We removed some search results to show you the most relevant ones
  </div>
  <button class="ais-RelevantSort-button">
    <span>See all results</span>
  </button>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-RelevantSort the root span of the widget
.ais-RelevantSort-text the informative text
.ais-RelevantSort-button the button text

Options

Note: there are no common options for this widget

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
informationText ({ isRelevantSorted, isVirtualReplica }) => "" Information text displayed above the button.
seeButtonText ({ isRelevantSorted, isVirtualReplica }) => isRelevantSorted ? "See all results" : "See relevant results" The text of the "See _n_ results" button.