EmptyState
OrganismEmpty-state message shown when there is no data. Supports icon, title, description, and action slots.
No results
<%- include('modules/ui/EmptyState', {
title: 'No results'
}) %>No items yet
Get started by creating your first item.
<%- include('modules/ui/EmptyState', {
title: 'No items yet',
description: 'Get started by creating your first item.',
icon: '<i class="fa-solid fa-folder-open" aria-hidden="true"></i>'
}) %>Your inbox is empty
New messages will appear here as soon as they arrive.
<%- include('modules/ui/EmptyState', {
title: 'Your inbox is empty',
description: 'New messages will appear here as soon as they arrive.',
icon: '<i class="fa-solid fa-inbox" aria-hidden="true"></i>',
action: '<button class="...">Add item</button>'
}) %>No matches found
Try adjusting your search or filter to find what you are looking for.
<%- include('modules/ui/EmptyState', {
title: 'No matches found',
description: 'Try adjusting your search or filter.',
icon: '<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>',
action: '<button class="...">Reset filters</button>'
}) %><%
var _title = locals.title || '';
var _description = locals.description || '';
var _icon = locals.icon || '';
var _action = locals.action || '';
var _className = locals.className || '';
%>
<div class="flex flex-col items-center justify-center text-center py-16 px-6<%= _className ? ' ' + _className : '' %>">
<% if (_icon) { %>
<div class="h-12 w-12 rounded-full bg-surface-sunken flex items-center justify-center text-text-disabled text-2xl mb-4" aria-hidden="true">
<%- _icon %>
</div>
<% } %>
<h3 class="text-sm font-semibold text-text-primary"><%= _title %></h3>
<% if (_description) { %>
<p class="mt-1 text-sm text-text-secondary max-w-xs"><%= _description %></p>
<% } %>
<% if (_action) { %>
<div class="mt-4"><%- _action %></div>
<% } %>
</div>