StellarAdmin

Theme

<sa-empty>
    <sa-empty-header>
        <sa-empty-media variant="EmptyMediaVariant.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="ButtonVariant.Outline">
            <sa-icon name="funnel-x"/>
            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

Basic

The plain empty state has no border or background. The content area holds the primary and secondary actions.

Theme

<sa-empty>
    <sa-empty-header>
        <sa-empty-title>No trips yet</sa-empty-title>
        <sa-empty-description>
            You haven&apos;t planned any trips yet. Get started by creating
            your first trip.
        </sa-empty-description>
    </sa-empty-header>
    <sa-empty-content>
        <div class="flex gap-2">
            <sa-linkbutton href="#">
                Plan a trip
            </sa-linkbutton>
            <sa-button variant="ButtonVariant.Outline">Import booking</sa-button>
        </div>
        <sa-linkbutton variant="ButtonVariant.Link" href="#" class="text-muted-foreground">
            Learn more
            <sa-icon name="arrow-up-right"/>
        </sa-linkbutton>
    </sa-empty-content>
</sa-empty>

With muted background

Add bg-muted to set the empty state on a subtle background.

Theme

<sa-empty class="bg-muted">
    <sa-empty-header>
        <sa-empty-title>No flights found</sa-empty-title>
        <sa-empty-description>
            No flights match your search. Try different dates or a nearby airport.
        </sa-empty-description>
    </sa-empty-header>
    <sa-empty-content>
        <sa-button>Search again</sa-button>
        <sa-linkbutton variant="ButtonVariant.Link" href="#" class="text-muted-foreground">
            Learn more
            <sa-icon name="arrow-up-right"/>
        </sa-linkbutton>
    </sa-empty-content>
</sa-empty>

With border

Add border to outline the empty state. Here the content is a search input group.

Theme

<sa-empty class="border">
    <sa-empty-header>
        <sa-empty-title>404 - Not Found</sa-empty-title>
        <sa-empty-description>
            The page you&apos;re looking for doesn&apos;t exist. Try searching
            for what you need below.
        </sa-empty-description>
    </sa-empty-header>
    <sa-empty-content>
        <sa-input-group class="w-3/4">
            <sa-input-group-input placeholder="Search destinations, bookings..."/>
            <sa-input-group-addon>
                <sa-icon name="circle-dashed"/>
            </sa-input-group-addon>
            <sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
                <sa-kbd>/</sa-kbd>
            </sa-input-group-addon>
        </sa-input-group>
        <sa-empty-description>
            Need help? <a href="#">Contact support</a>
        </sa-empty-description>
    </sa-empty-content>
</sa-empty>

With icon

Use <sa-empty-media variant="EmptyMediaVariant.Icon"> to show an icon above the title.

Theme

<sa-empty class="border">
    <sa-empty-header>
        <sa-empty-media variant="EmptyMediaVariant.Icon">
            <sa-icon name="folder"/>
        </sa-empty-media>
        <sa-empty-title>No itineraries yet</sa-empty-title>
        <sa-empty-description>
            No itineraries have been created for this trip yet. Get started by <a href="#">creating the first one</a>.
        </sa-empty-description>
    </sa-empty-header>
    <sa-empty-content>
        <sa-button variant="ButtonVariant.Outline">
            <sa-icon name="plus"/>
            New Itinerary
        </sa-button>
    </sa-empty-content>
</sa-empty>

With muted background alt

Use an opacity modifier such as bg-muted/50 for an even lighter background.

Theme

<sa-empty class="bg-muted/50">
    <sa-empty-header>
        <sa-empty-title>404 - Not Found</sa-empty-title>
        <sa-empty-description>
            The page you&apos;re looking for doesn&apos;t exist. Try searching
            for what you need below.
        </sa-empty-description>
    </sa-empty-header>
    <sa-empty-content>
        <sa-input-group class="w-3/4">
            <sa-input-group-input placeholder="Search destinations, bookings..." />
            <sa-input-group-addon>
                <sa-icon name="circle-dashed"/>
            </sa-input-group-addon>
            <sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
                <sa-kbd>/</sa-kbd>
            </sa-input-group-addon>
        </sa-input-group>
        <sa-empty-description>
            Need help? <a href="#">Contact support</a>
        </sa-empty-description>
    </sa-empty-content>
</sa-empty>

API Reference

`<sa-empty>`

Renders a <div> element that centers the empty state content.

`<sa-empty-header>`

Renders a <div> element grouping the media, title, and description.

`<sa-empty-media>`

Renders a <div> element for displaying an icon, image, or avatar.

Prop

Type

`<sa-empty-title>`

Renders a <div> element containing the title.

`<sa-empty-description>`

Renders a <div> element containing the description.

`<sa-empty-content>`

Renders a <div> element for actions such as buttons or links.

Empty

On this page