Empty states
"No items yet" panel — icon, sentence-case heading, optional body, optional CTA. Used on every empty surface in the app: page-level lists, tab content, sub-sections, side trays, modals.
Canonical
Branch on entity — match the icon. Add a CTA when the user can create the first item from here.
Variants
4 variantsNo transactions yet
Accepted quotes that are instructed will appear here.
No quotes match your search
Try clearing filters or broadening your search.
No eligible users
All team members already have access.
States
2 statesNo quotes match your search
Try clearing filters or broadening your search.
Props
7 attributes| Attribute | Values | Notes |
|---|---|---|
| icon | IconName | Glyph in the circle. Defaults to FileText. |
| title | string | Sentence-case heading. Defaults to Nothing to show yet. |
| size | Default, Small | Small for trays, dropdowns, and compact inline blocks. |
| cta-href | string? | Anchor href for the CTA. Required with cta-label. |
| cta-label | string? | CTA button text. |
| cta-tray | bool | Open CTA in a side tray instead of navigating. |
| cta-color | Primary, Secondary, Outline, Danger | CTA button colour family. Defaults to Primary. |
Do & don't
No quotes match your search
Try clearing filters or broadening your search.
Search for filter misses; the entity icon for first-run.
Something went wrong
Editorial variant
editorial swaps the title to Fraunces serif with italic
plum emphasis. Add inline <em> to the title to pick
up the brand colour. Pair with a Primary CTA — the title carries the brand voice; the CTA carries
the action.
No quotes <em>yet.</em>
The first one is the slowest. After that, it's a few clicks per matter.
New quote
Note: the helper passes the title through unescaped, which lets the <em>
render. Don't build titles from user-supplied content for this variant.
| Attribute | Notes |
|---|---|
| editorial | Boolean. Switches the title to Fraunces serif with italic plum <em> highlighting. Use for hero / page-level empty states only. |