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 |