Empty State
The standard "nothing here yet" block — optional icon, title, message, and a projected call-to-action. Use for empty tables, lists, search results, and any content area with no data.
Selector: tip-empty-state
API
| Name | Type | Default | Description |
|---|---|---|---|
icon (input) |
string | undefined |
undefined |
Icon name shown inside a rounded icon well above the title. |
title (input) |
string | undefined |
undefined |
Bold heading. |
message (input) |
string | null |
null |
Muted supporting copy, max-width 340px. |
size (input) |
EmptyStateSize = 'sm' | 'md' |
'md' |
Scales padding, icon well size (40/52px), and title font size. |
[action] (slot) |
content | — | Optional CTA (e.g. a tip-button to clear filters), spaced above only if non-empty. |
Usage
<tip-empty-state
icon="search-x" title="No matching orders"
message="No orders match your search or filters. Try a different term or clear the filters."
/>
Notes
- All content (icon well, title, message, action) is independently optional and conditionally rendered — no required inputs.
- Typically placed inside a full-width
<td [attr.colspan]>for a table's empty-result row (see Orders), or as a standalone block for empty lists. size="sm"is meant for tighter contexts (a panel, not a whole page/table) — full table empty-states use themddefault.