Components Empty states

Empty states

"No items yet" panel. Always all three: an icon, a short warm sentence-case heading, and a warm friendly one-sentence description — never heading-only. Optional CTA. Used on every empty surface in the app: page-level lists, tab content, sub-sections, side trays, modals.

<koala-empty-state>

Canonical

No team members yet

Invite your first team member to get started.

Invite team member

<koala-empty-state icon="Users" title="No team members yet" cta-href="@inviteUrl" cta-label="Invite team member">
    Invite your first team member to get started.
</koala-empty-state>

Always include all three: an icon, a short warm heading, and a warm one-sentence description (the inner body content) — never heading-only. Branch on entity — match the icon. Add a CTA when the user can create the first item from here.

Variants

4 variants

No quotes yet

Quotes will appear here once they're created.

New quote

Quotes

icon="Quote"

No transactions yet

Accepted quotes that are instructed will appear here.

Transactions — no CTA

icon="Transaction"

No quotes match your search

Try clearing filters or broadening your search.

Filtered — search

icon="Search"

No eligible users

All team members already have access.

Small — trays and compact blocks

size="Small"

No CTA — omit cta-href / cta-label when there's nothing to create from here.

<koala-empty-state icon="Transaction" title="No transactions yet">
    Accepted quotes that are instructed will appear here.
</koala-empty-state>

Small — for side trays, dropdowns, and compact inline blocks.

<koala-empty-state size="Small" icon="Users" title="No eligible users">
    All team members already have access.
</koala-empty-state>

States

2 states

No quotes yet

Quotes will appear here once they're created.

New quote

First-run

No quotes match your search

Try clearing filters or broadening your search.

Filtered

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, Danger	CTA button colour family. Defaults to `Primary`.

Do & don't

No quotes match your search

Try clearing filters or broadening your search.

Do Branch on filtered vs truly-empty. Use Search for filter misses; the entity icon for first-run.

Something went wrong

Don't Don't use empty states for error states — use an alert banner instead.

Editorial variant

editorial keeps the title in Plus Jakarta Sans while increasing the scale and adding 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 yet.

The first one is the slowest. After that, it's a few clicks per matter.

New quote

<koala-empty-state icon="Quote" title="No quotes <em>yet.</em>" cta-href="@newQuoteUrl" cta-label="New quote" editorial>
    The first one is the slowest. After that, it's a few clicks per matter.
</koala-empty-state>

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 a larger Plus Jakarta Sans treatment with italic plum `<em>` highlighting. Use for hero / page-level empty states only.