No Results

Display helpful empty states when searches return no results or when lists are empty. The no-results component helps maintain good user experience during these scenarios.

The no-results component supports 9 different variants, each with its own color scheme and styling:

No items found

This is the default variant.

No items found

This is the dark variant.

No items found

This is the light variant.

No items found

This is the brand variant.

No items found

This is the primary variant.

No items found

This is the secondary variant.

All caught up!

This is the success variant.

Nothing here yet

This is the warning variant.

No results found

This is the danger variant.

<x-andach-no-results title="No items found">This is the <strong>default</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="dark" title="No items found">This is the <strong>dark</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="light" title="No items found">This is the <strong>light</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="brand" title="No items found">This is the <strong>brand</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="primary" title="No items found">This is the <strong>primary</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="secondary" title="No items found">This is the <strong>secondary</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="success" title="All caught up!">This is the <strong>success</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="warning" title="Nothing here yet">This is the <strong>warning</strong> variant.</x-andach-no-results>
<x-andach-no-results variant="danger" title="No results found">This is the <strong>danger</strong> variant.</x-andach-no-results>

Customisation

Attribute Name	Type	Default Value	Description
icon	string	null	HTML string for the icon display (FontAwesome, Heroicons, etc.).
title	string	null	The main heading text for the empty state.
background	string	null	Controls the background styling of the component.
border	string	null	Adds border styling for enhanced visual separation.
divide	string	null	Adds divider lines between sections.
hollow	string	null	Creates a hollow/outline style with transparent background.
ring	string	null	Adds a ring/outline effect for additional emphasis.
rounded	string	null	Controls the border radius of the component corners.
shadow	string	null	Adds drop shadow effects for depth and elevation.
size	string	null	Controls the overall size and spacing. Options: 'xs', 'sm', 'base', 'lg', 'xl'.
variant	string	null	Color scheme variant. Options: 'default', 'dark', 'light', 'brand', 'primary', 'secondary', 'success', 'warning', 'danger'.

With Icons

Add visual context with icons to make empty states more engaging:

No search results

We couldn't find any items matching your search criteria. Try adjusting your filters or search terms.

All tasks completed

Great job! You've completed all your tasks for today.

No data available

The requested data is currently unavailable. Please try again later.

<x-andach-no-results
                variant="primary"
                icon="<i class='fa-solid fa-search'></i>"
                title="No search results">
                We couldn't find any items matching your search criteria.
            </x-andach-no-results>

            <x-andach-no-results
                variant="success"
                icon="<i class='fa-solid fa-check-circle'></i>"
                title="All tasks completed">
                Great job! You've completed all your tasks for today.
            </x-andach-no-results>

Size Variations

Control the size and spacing to fit different contexts:

No items

Small empty state for compact areas.

Your inbox is empty

Large empty state with generous spacing for main content areas.

<x-andach-no-results
                size="sm"
                variant="secondary"
                title="No items">
                Small empty state for compact areas.
            </x-andach-no-results>

            <x-andach-no-results
                size="lg"
                variant="brand"
                icon="<i class='fa-solid fa-inbox'></i>"
                title="Your inbox is empty">
                Large empty state with generous spacing.
            </x-andach-no-results>

Styling Attributes

Enhance the appearance with various styling options:

No notifications

Empty state with border styling.

No favorites yet

Enhanced empty state with shadow and ring effects.

No content found

Hollow style empty state with outline appearance.

<x-andach-no-results
    variant="primary"
    :border="true"
    title="No notifications">
    Empty state with border styling.
</x-andach-no-results>

<x-andach-no-results
    variant="success"
    :shadow="true"
    :ring="true"
    icon="<i class='fa-solid fa-star'></i>"
    title="No favorites yet">
    Enhanced empty state with shadow and ring effects.
</x-andach-no-results>

<x-andach-no-results
    variant="warning"
    :hollow="true"
    title="No content found">
    Hollow style empty state with outline appearance.
</x-andach-no-results>

Real-World Examples

Common scenarios where no-results components provide excellent user experience:

No files in this folder

This folder is empty. Upload files or create new documents to get started.

No messages

You're all caught up! No new messages to display.

Your cart is empty

Add some items to your cart to continue shopping.

<x-andach-no-results
                variant="secondary"
                icon="<i class='fa-solid fa-folder-open'></i>"
                title="No files in this folder">
                This folder is empty. Upload files or create new documents to get started.
            </x-andach-no-results>

            <x-andach-no-results
                variant="primary"
                icon="<i class='fa-solid fa-comments'></i>"
                title="No messages">
                You're all caught up! No new messages to display.
            </x-andach-no-results>