SutraUI.Empty (Sutra UI v0.2.0)
View SourceDisplay empty states with icons, titles, descriptions, and actions.
Empty states are shown when there's no data to display, providing users with context and potential actions they can take.
Examples
<.empty>
<:icon>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-6"><path d="M10 10.5 8 8l4-4 4 4-2 2.5"/><path d="M14 10.5 16 8l-4-4-4 4 2 2.5"/><path d="M4 22V4c0-.5.2-1 .6-1.4C5 2.2 5.5 2 6 2h12c.5 0 1 .2 1.4.6.4.4.6.9.6 1.4v18l-4-3-4 3-4-3Z"/></svg>
</:icon>
<:title>No Projects Yet</:title>
<:description>
You haven't created any projects yet. Get started by creating your first project.
</:description>
<:actions>
<button class="btn">Create Project</button>
</:actions>
</.empty>
<.empty variant="outline">
<:icon>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-6"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
</:icon>
<:title>Cloud Storage Empty</:title>
<:description>Upload files to access them anywhere.</:description>
</.empty>Summary
Functions
Renders an empty state component.
Functions
Renders an empty state component.
Attributes
variant(:string) - The visual variant of the empty state. Defaults to"default". Must be one of"default", or"outline".class(:string) - Additional CSS classes. Defaults tonil.- Global attributes are accepted. Additional HTML attributes. Supports all globals plus:
["id"].
Slots
icon- Optional icon or image slot displayed above the title.title(required) - The empty state title (h3 heading).description- Optional description text providing context.actions- Optional actions section for buttons or other interactive elements.footer- Optional footer slot for additional links or information.