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