No Results, animated React component
A no-results state that says why nothing matched and fixes it in one tap. The missing letter slides into the search box, the filter chips peel away one by one and the matching rows drop back in.
- Pro
- Cards
- Spring
Pops when the missing letter slides into the search box, ticks softly as the filter chips peel away (every other chip) and taps on Reset; typing and hover are silent. Sound is off on this site until you switch it on.
Play with it
Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.
No invoices match "invoce march"
There's a typo, and 2 filters are narrowing things down.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| rows | NoResultsRow[] | NO_RESULTS_ROWS | The rows the list shows once nothing hides them, each { id, who, amount, status, age }. Defaults to four demo invoices. |
| filters | NoResultsFilter[] | NO_RESULTS_FILTERS | The filter chips applied at the start, each { label, test(row) }. A row stays only if every filter keeps it. |
| query | string | "invoce march" | The text in the search box at the start. |
| typo | { wrong: string[]; right: string } | NO_RESULTS_TYPO | The misspellings the empty state looks for and the word the fix button puts in their place. |
| noun | string | "invoices" | What the rows are called, used in the headline and the input label. |
| maxRows | number | 6 | Most rows the list shows once nothing is hiding them. |
| onFixTypo | (query: string) => void | undefined | Called with the corrected query when the fix button is pressed. The autoplay demo never calls it. |
| onClearFilters | () => void | undefined | Called when Clear filters is pressed. The autoplay demo never calls it. |
| autoplay | boolean | false | Fixes the typo, clears the filters and starts over on a loop until someone touches it. Pauses off screen and never runs under reduced motion. |
| className | string | "" | Extra classes for the card. |
| enableSound | boolean | true | Plays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component. |
No Results questions
Does it make sound, and how do I turn it off?
Pops when the missing letter slides into the search box, ticks softly as the filter chips peel away (every other chip) and taps on Reset; typing and hover are silent. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.