Empty
The Empty Tag Helper allows you to display an empty state.
<dui-empty>
<dui-empty-header>
<dui-empty-media variant="EmptyMediaVariant.Icon">
<dui-icon name="search"/>
</dui-empty-media>
<dui-empty-title>No Destinations Match Your Search</dui-empty-title>
<dui-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.
</dui-empty-description>
</dui-empty-header>
<dui-empty-content>
<dui-button variant="ButtonVariant.Outline">
<dui-icon name="funnel-x"/>
Reset Search Filters
</dui-button>
</dui-empty-content>
</dui-empty>Usage
<dui-empty>
<dui-empty-header>
<dui-empty-media>...</dui-empty-media>
<dui-empty-title>...</dui-empty-title>
<dui-empty-description>...</dui-empty-description>
</dui-empty-header>
<dui-empty-content>
...
</dui-empty-content>
</dui-empty>Examples
Basic
<dui-empty>
<dui-empty-header>
<dui-empty-title>No projects yet</dui-empty-title>
<dui-empty-description>
You haven't created any projects yet. Get started by creating
your first project.
</dui-empty-description>
</dui-empty-header>
<dui-empty-content>
<div class="flex gap-2">
<dui-linkbutton href="#">
Create project
</dui-linkbutton>
<dui-button variant="ButtonVariant.Outline">Import project</dui-button>
</div>
<dui-linkbutton variant="ButtonVariant.Link" href="#" class="text-muted-foreground">
Learn more
<dui-icon name="arrow-up-right"/>
</dui-linkbutton>
</dui-empty-content>
</dui-empty>With Muted Background
<dui-empty class="bg-muted">
<dui-empty-header>
<dui-empty-title>No results found</dui-empty-title>
<dui-empty-description>
No results found for your search. Try adjusting your search terms.
</dui-empty-description>
</dui-empty-header>
<dui-empty-content>
<dui-button>Try again</dui-button>
<dui-linkbutton variant="ButtonVariant.Link" href="#" class="text-muted-foreground">
Learn more
<dui-icon name="arrow-up-right"/>
</dui-linkbutton>
</dui-empty-content>
</dui-empty>With Border
<dui-empty class="border">
<dui-empty-header>
<dui-empty-title>404 - Not Found</dui-empty-title>
<dui-empty-description>
The page you're looking for doesn't exist. Try searching
for what you need below.
</dui-empty-description>
</dui-empty-header>
<dui-empty-content>
<dui-input-group class="w-3/4">
<dui-input-group-input placeholder="Try searching for pages..."/>
<dui-input-group-addon>
<dui-icon name="circle-dashed"/>
</dui-input-group-addon>
<dui-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<dui-kbd>/</dui-kbd>
</dui-input-group-addon>
</dui-input-group>
<dui-empty-description>
Need help? <a href="#">Contact support</a>
</dui-empty-description>
</dui-empty-content>
</dui-empty>With Icon
<dui-empty class="border">
<dui-empty-header>
<dui-empty-media variant="EmptyMediaVariant.Icon">
<dui-icon name="folder"/>
</dui-empty-media>
<dui-empty-title>Nothing to see here</dui-empty-title>
<dui-empty-description>
No posts have been created yet. Get started by <a href="#">creating your first post</a>.
</dui-empty-description>
</dui-empty-header>
<dui-empty-content>
<dui-button variant="ButtonVariant.Outline">
<dui-icon name="plus"/>
New Post
</dui-button>
</dui-empty-content>
</dui-empty>With Muted Background Alt
<dui-empty class="bg-muted/50">
<dui-empty-header>
<dui-empty-title>404 - Not Found</dui-empty-title>
<dui-empty-description>
The page you're looking for doesn't exist. Try searching
for what you need below.
</dui-empty-description>
</dui-empty-header>
<dui-empty-content>
<dui-input-group class="w-3/4">
<dui-input-group-input placeholder="Try searching for pages..." />
<dui-input-group-addon>
<dui-icon name="circle-dashed"/>
</dui-input-group-addon>
<dui-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<dui-kbd>/</dui-kbd>
</dui-input-group-addon>
</dui-input-group>
<dui-empty-description>
Need help? <a href="#">Contact support</a>
</dui-empty-description>
</dui-empty-content>
</dui-empty>