Empty
The Empty Tag Helper allows you to display an empty state.
<sa-empty>
<sa-empty-header>
<sa-empty-media variant="Icon">
<sa-icon name="search"/>
</sa-empty-media>
<sa-empty-title>No Destinations Match Your Search</sa-empty-title>
<sa-empty-description>
We couldn't find any flights, hotels, or packages matching your filters. Try adjusting your dates,
increasing your search radius, or selecting a different airport.
</sa-empty-description>
</sa-empty-header>
<sa-empty-content>
<sa-button variant="Outline">Reset Search Filters</sa-button>
</sa-empty-content>
</sa-empty>Usage
<sa-empty>
<sa-empty-header>
<sa-empty-media>...</sa-empty-media>
<sa-empty-title>...</sa-empty-title>
<sa-empty-description>...</sa-empty-description>
</sa-empty-header>
<sa-empty-content>
...
</sa-empty-content>
</sa-empty>Examples
Display avatar
Display an Avatar instead of an icon.
<sa-empty>
<sa-empty-header>
<sa-empty-media>
<sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Brooklynn" class="size-12 grayscale"/>
</sa-empty-media>
<sa-empty-title>User Offline</sa-empty-title>
<sa-empty-description>
This user is currently offline. You can leave a message to notify them
or try again later.
</sa-empty-description>
</sa-empty-header>
<sa-empty-content>
<sa-button size="Small">
Leave Message
</sa-button>
</sa-empty-content>
</sa-empty>Custom CSS
Use the class attribute to add custom CSS styling to any of the breadcrumb components.
<sa-empty class="border-solid border-1 border-gray-200">
<sa-empty-header>
<sa-empty-media variant="Icon" class="bg-transparent border border-gray-200 shadow-lg">
<sa-icon name="search"/>
</sa-empty-media>
<sa-empty-title>No Destinations Match Your Search</sa-empty-title>
<sa-empty-description>
We couldn't find any flights, hotels, or packages matching your filters. Try adjusting your dates,
increasing your search radius, or selecting a different airport.
</sa-empty-description>
</sa-empty-header>
<sa-empty-content>
<sa-button variant="Outline">Reset Search Filters</sa-button>
</sa-empty-content>
</sa-empty>