Empty

Usage

<%= render "components/empty" do %>
  <%= render "components/empty/header" do %>
    <%= render "components/empty/media", icon: :inbox %>
    <%= render "components/empty/title", text: "No messages" %>
    <%= render "components/empty/description", text: "Messages you receive will appear here." %>
  <% end %>
<% end %>

Examples

With Action

<%= render "components/empty" do %>
  <%= render "components/empty/header" do %>
    <%= render "components/empty/media", icon: :folder %>
    <%= render "components/empty/title", text: "No projects yet" %>
    <%= render "components/empty/description", text: "Get started by creating your first project." %>
  <% end %>
  <%= render "components/empty/content" do %>
    <button data-component="button" data-variant="primary">Create project</button>
  <% end %>
<% end %>

Outline Variant

<%= render "components/empty", variant: :outline do %>
  <%= render "components/empty/header" do %>
    <%= render "components/empty/media", icon: :upload %>
    <%= render "components/empty/title", text: "Drop files here" %>
  <% end %>
<% end %>

Compact Size

<%= render "components/empty", size: :compact do %>
  <%= render "components/empty/header" do %>
    <%= render "components/empty/media", icon: :search %>
    <%= render "components/empty/title", text: "No results found" %>
  <% end %>
<% end %>

API Reference

Empty

Parameter	Type	Default	Description
variant	Symbol	:default	:default or :outline
size	Symbol	:default	:default or :compact
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes

Empty Header

Parameter	Type	Default	Description
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes

Empty Media

Parameter	Type	Default	Description
icon	Symbol	nil	Icon name
content	String	nil	Captured HTML via capture, or use block
variant	Symbol	:icon	:icon or :avatar
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes

Empty Title

Parameter	Type	Default	Description
text	String	nil	Title text
content	String	nil	Captured HTML via capture, or use block
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes

Empty Description

Parameter	Type	Default	Description
text	String	nil	Description text
content	String	nil	Captured HTML via capture, or use block
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes

Empty Content

Parameter	Type	Default	Description
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes

Helper Methods

Three helpers cover the common empty-state patterns without composing partials:

<%= empty_state title: "No documents", description: "Create your first document.", icon: :folder do %>
  <%= link_to "New document", new_document_path, data: { component: "button", variant: "primary" } %>
<% end %>

<%= empty_search_state query: params[:q], reset_path: documents_path %>

<%= empty_list_state resource_name: "project", new_path: new_project_path %>

Method	Description
empty_state(title:, description:, icon:, variant:, size:, &block)	General empty state; block renders action content
empty_search_state(query:, reset_path:, size:)	No-results state for searches, with optional reset link
empty_list_state(resource_name:, new_path:, icon:, size:)	First-run state for empty collections, with optional create link