Empty states

Use the koala-empty-state tag helper for info alert boxes on empty list pages. Renders a blue alert with icon, padding wrapper, and paragraph wrapping.

Basic usage

A simple message when no items are found.

No quotes found.

<div koala-empty-state>No quotes found.</div>

Usage guidance

When and where to use empty states.

Do	Don't
Use on list pages when filtered or unfiltered results are empty	Use for error states (use alert banners instead)
Vary the message based on search/filter state	Show alongside populated content
Use in tab panels when that tab has no data	Use for form validation messages
Add an action button below when the user can create their first item	Nest multiple empty states on the same page

Empty list state

Centered empty-list message with optional icon. Used at the bottom of tabbed lists and tables when the result set is empty (no rows, no matching search results).

No team members yet

Invite your first team member to get started.

Invite team member

<koala-empty-list icon="FileText" title="No quotes yet"
                  cta-href="/partner/quotes/create" cta-label="New quote">
    Get started by creating your first quote.
</koala-empty-list>

Full-page centered CTA card

For dashboard / home pages where the page itself has nothing to show, render a centered koala-card with a brand-soft circular icon, sentence-case heading, one-line description, and a primary CTA. Used by the client home for both the "first visit" welcome and the "past items but nothing active" in-between state. Sized at max-w-2xl mx-auto so it sits centered on wide screens without filling the column.

Moving again?

Get an instant conveyancing quote for your next purchase, sale, or both.

Get a new quote

<div koala-card class="max-w-2xl mx-auto">
    <div class="flex flex-col items-center justify-center text-center py-8">
        <div class="flex items-center justify-center w-14 h-14 rounded-full bg-brand-soft dark:bg-brand-softer mb-4">
            <koala-icon name="House" class="w-7 h-7 text-brand dark:text-brand-light" />
        </div>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Moving again?</h3>
        <p class="text-gray-500 dark:text-gray-400 mb-5 max-w-md">
            Get an instant conveyancing quote for your next purchase, sale, or both.
        </p>
        <a href="..." koala-btn="Primary">Get a new quote</a>
    </div>
</div>

For the "first visit" variant, use a larger 16×16 icon, py-10, and prefix the heading with a koala-page-title welcome.