Feedback & status

AppEmptyState

The friendly placeholder a card or section shows when it has nothing to display yet.

<app-empty-state icon="folder-open" title="No projects yet" text="Create your first project." />

An empty state is what a card or section shows when it has loaded but has nothing to display — no projects, no notifications, no results. <app-empty-state> turns that blank space into a clear moment: an icon, a title, a line of guidance, and usually the one action that fills it.

Its look comes entirely from the shared @webority/theme, so the Razor <app-empty-state> and the React <AppEmptyState> render identically — the same placeholder on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the placeholder above it.

No projects yet
Create your first project to get started.
<app-empty-state icon="folder-open" title="No projects yet" text="Create your first project to get started." />

Anatomy

An icon bubble, a title, optional body text, and an optional action — usually the primary next step that turns the empty state into a full one.

Icon, title, text and an action
The action is the whole point: don't just say it's empty, offer the way to fill it. In Razor the action is the inner content.
No projects yet
Create your first project to get started.
Show code 
<app-empty-state icon="folder-open" title="No projects yet"
                 text="Create your first project to get started.">
    <app-button variant="primary" left-icon="plus" class="mt-3">New project</app-button>
</app-empty-state>
An empty state should offer the next actionThe best empty state isn't a dead end — it's an invitation. Whenever there's a natural first step (create a project, invite a teammate), put it right there as the inner action so the user can act without hunting for a button.

Sizes

Two type scales. md (default) is the page or card empty state; sm is the tighter variant for a widget or tile.

md · sm
The same component reads as a full-card empty state or a compact tile placeholder.
No projects yet
Create your first project to get started.
No notifications
You're all caught up.
Show code 
<app-empty-state icon="folder-open" title="No projects yet"
                 text="Create your first project to get started." />
<app-empty-state icon="bell" size="sm" title="No notifications"
                 text="You're all caught up." />

When to use

Use it when

  • A card or section has loaded but there is genuinely nothing to show.
  • A first-run experience where the user hasn't created anything yet.
  • A filtered or searched view returned no matches and you want to explain why.

Reach for something else when

  • The data is still loading (first fetch). → AppSkeleton
  • The empty result lives inside a data table body. → AppTableEmptyState
  • Something went wrong fetching the data. → AppAlert
  • You just need a one-line "nothing here" with no framing. → a muted caption

Best practices

Do
No team members yet
Invite a colleague to collaborate on this project.
Names what's missing, explains why it matters, and offers the exact action to fix it.
Don't
Empty
A bare "Empty" with no guidance and no action leaves the user stuck at a dead end.
Do
No results for “risk”
Try a broader keyword or clear the filters.
A search-empty explains the specific query and suggests how to get results.
Don't
No results
No results found. No results found. No results found.
Repetitive filler text pads the space without helping the user do anything.

Every option

The whole surface of the component, one cell per value — every size, every combination of icon/title/text/action, and the edge cases (missing icon, missing action, long text).

size — both scales

size="md"
No projects yet
Create your first project to get started.
size="sm"
No projects yet
Create your first project to get started.

icon

icon="folder-open"
No projects yet
icon="search"
No results
no icon
No projects yet
icon-size="48"
No notifications

content combinations

title only
Empty
title + text
No messages
You're all caught up — new messages will show up here.
title + action, no text
No team members yet
title + text + action
No documents
Upload your first file to get started.
no icon, no action — text only
Nothing here
This section has no content yet.
nothing but title — every optional attribute omitted
Empty

edge cases

long text overflow
No results for &ldquo;risk assessment methodology&rdquo;
Try a broader keyword, remove a filter, or check the spelling — none of the current filters returned a match in this workspace.
size="sm" + full content — the tighter widget/tile variant with everything
No notifications
You're all caught up.

Attributes

AttributeTypeDefaultDescription
iconstring—Bootstrap Icons glyph for the bubble (React icon, which also accepts a custom node). Optional.
icon-sizeint24Glyph size in px (React iconSize).
sizemd | smmdType scale — sm is the tighter widget/tile variant.
titlestring—The heading — name what's missing (React title, which also accepts a node).
textstring—Supporting line of guidance below the title (React text, which also accepts a node).
(content)markup—Inner content renders as the action slot — usually the next-step app-button (React action).