@empathyco/x-components
Version:
Empathy X Components
51 lines (36 loc) • 1.21 kB
Markdown
title: FallbackDisclaimer
# FallbackDisclaimer
The `FallbackDisclaimer` component shows a message if the filters have been removed
from the current search because there were no results.
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | |
## Examples
This default fallback disclaimer component reads the query from the search state and passes it to
its default slot. This component will be rendered if there is a no results with filters situation.
### Basic usage
```vue
<template>
<FallbackDisclaimer />
</template>
<script setup>
import { FallbackDisclaimer } from "@empathyco/x-components/search";
</script>
```
### Customizing its contents
```vue
<template>
<FallbackDisclaimer>
<template #default="{ query }">
No results found for '{{ query }}' with the selected filters. The filters
have been unselected.
</template>
</FallbackDisclaimer>
</template>
<script setup>
import { FallbackDisclaimer } from "@empathyco/x-components/search";
</script>
```