SbEmptyState

Displays a placeholder when there is no content to show, such as empty lists, search results with no matches, or first-time user experiences. Provides a visual cue with optional icon, title, description, and action buttons.

Parameters

Parameter	Type	Default	Description
IconText	string?	"📭"	Icon text (emoji or symbol) shown when Icon is not provided
Title	string?	"No items found"	Main heading text
Description	string?	null	Secondary descriptive text
Class	string?	null	Additional CSS classes

Templates / Slots

Slot	Type	Description
Icon	RenderFragment?	Custom icon content (takes precedence over IconText)
ChildContent	RenderFragment?	Additional content below the description
Actions	RenderFragment?	Action buttons (e.g., "Create New", "Try Again")

Template Usage

With Custom Icon

<SbEmptyState Title="No Messages">
    <Icon>
        <SbIcon Name="inbox" Size="SbSize.Xl" />
    </Icon>
</SbEmptyState>

With Actions

<SbEmptyState Title="No Projects" Description="Get started by creating your first project.">
    <Actions>
        <SbButton>Create Project</SbButton>
    </Actions>
</SbEmptyState>

With Custom Content

<SbEmptyState Title="Search Results">
    <ChildContent>
        <p>Try adjusting your search terms or filters.</p>
    </ChildContent>
</SbEmptyState>

CSS Classes

sb-empty-state - Base class
sb-empty-state__icon - Icon container
sb-empty-state__icon-text - Icon text element
sb-empty-state__title - Title heading
sb-empty-state__description - Description paragraph
sb-empty-state__content - Custom content wrapper
sb-empty-state__actions - Actions container

Examples

Basic Empty State

<SbEmptyState />

With Custom Title and Description

<SbEmptyState 
    Title="No notifications"
    Description="You're all caught up! Check back later for new updates." />

With Custom Icon Text

<SbEmptyState 
    IconText="🔍"
    Title="No results found"
    Description="Try different search terms." />

With Icon Component

<SbEmptyState Title="Empty Cart" Description="Your shopping cart is empty.">
    <Icon>
        <SbIcon Name="shopping-cart" Size="SbSize.Xl" Class="text-muted" />
    </Icon>
    <Actions>
        <SbButton Variant="SbButtonVariant.Primary">Start Shopping</SbButton>
    </Actions>
</SbEmptyState>

First-Time User Experience

<SbEmptyState 
    IconText="🚀"
    Title="Welcome to Your Dashboard"
    Description="This is where your projects will appear once you create them.">
    <Actions>
        <SbButton Variant="SbButtonVariant.Primary" OnClick="CreateProject">
            Create Your First Project
        </SbButton>
        <SbButton Variant="SbButtonVariant.Ghost" OnClick="LearnMore">
            Learn More
        </SbButton>
    </Actions>
</SbEmptyState>

Error State

<SbEmptyState 
    IconText="⚠️"
    Title="Unable to load data"
    Description="Something went wrong while fetching your data.">
    <Actions>
        <SbButton OnClick="Retry">Try Again</SbButton>
    </Actions>
</SbEmptyState>

Search No Results

<SbEmptyState 
    IconText="🔍"
    Title="No matches found"
    Description="We couldn't find anything matching your search.">
    <ChildContent>
        <p><strong>Suggestions:</strong></p>
        <ul>
            <li>Check your spelling</li>
            <li>Try more general terms</li>
            <li>Try different keywords</li>
        </ul>
    </ChildContent>
    <Actions>
        <SbButton Variant="SbButtonVariant.Ghost" OnClick="ClearSearch">
            Clear Search
        </SbButton>
    </Actions>
</SbEmptyState>

In a Data Grid

<SbDataGrid Items="@filteredItems">
    <EmptyTemplate>
        <SbEmptyState 
            IconText="📋"
            Title="No data available"
            Description="Add some items to see them here." />
    </EmptyTemplate>
    <SbColumn Field="Name" Title="Name" />
    <SbColumn Field="Status" Title="Status" />
</SbDataGrid>

4.2 KiB Raw Blame History