Components Empty states

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.

<koala-empty-state>

Canonical

No team members yet

Invite your first team member to get started.

Invite team member

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="Quote2"

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"

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