EmptyState

Organism

Empty-state message shown when there is no data. Supports icon, title, description, and action slots.

Title only

Preview

No results

Code
<%- include('modules/ui/EmptyState', {
  title: 'No results'
}) %>

With icon and description

Preview

No items yet

Get started by creating your first item.

Code
<%- include('modules/ui/EmptyState', {
  title: 'No items yet',
  description: 'Get started by creating your first item.',
  icon: ''
}) %>

With primary action

Preview

Your inbox is empty

New messages will appear here as soon as they arrive.

Code
<%- include('modules/ui/EmptyState', {
  title: 'Your inbox is empty',
  description: 'New messages will appear here as soon as they arrive.',
  icon: '',
  action: ''
}) %>

Search empty

Preview

No matches found

Try adjusting your search or filter to find what you are looking for.

Code
<%- include('modules/ui/EmptyState', {
  title: 'No matches found',
  description: 'Try adjusting your search or filter.',
  icon: '',
  action: ''
}) %>
Source modules/ui/EmptyState.ejs