Empty - Rails UI Components

No items found

Get started by creating a new item.

Usage

<%= ui.empty do %>
  <%= ui.empty_icon "user" %>
  <%= ui.empty_title "No results" %>
  <%= ui.empty_description "Try adjusting your search." %>
<% end %>

<%= ui.empty do %>
  <%= ui.empty_icon "user" %>
  <%= ui.empty_title "No projects" %>
  <%= ui.empty_description "Create your first project." %>
  <%= ui.empty_actions do %>
    <%= ui.btn "New project", url: "#" %>
  <% end %>
<% end %>

Subcomponents

Name	Helper	Description
`empty_icon`	`ui.empty_icon`	Icon displayed at the top of the empty state. Inherits from Ui::Icon::Component.
`empty_title`	`ui.empty_title`	Main title text for the empty state.
`empty_description`	`ui.empty_description`	Secondary description text with muted styling.
`empty_actions`	`ui.empty_actions`	Container for action buttons.

Examples

With actions

No upcoming meetings

Create a meeting to get started.

Create meeting View docs

<%= ui.empty do %>
  <%= ui.empty_icon "github" %>
  <%= ui.empty_title "No upcoming meetings" %>
  <%= ui.empty_description "Create a meeting to get started." %>
  <%= ui.empty_actions do %>
    <%= ui.btn "Create meeting", url: "#" %>
    <%= ui.btn "View docs", url: "#", variant: :outline %>
  <% end %>
<% end %>

Single action

No projects yet

Get started by creating a new project.

New project

<%= ui.empty do %>
  <%= ui.empty_icon "github" %>
  <%= ui.empty_title "No projects yet" %>
  <%= ui.empty_description "Get started by creating a new project." %>
  <%= ui.empty_actions do %>
    <%= ui.btn "New project", url: "#" %>
  <% end %>
<% end %>

Without actions

No results found

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

<%= ui.empty do %>
  <%= ui.empty_icon "github" %>
  <%= ui.empty_title "No results found" %>
  <%= ui.empty_description "Try adjusting your search or filter to find what you're looking for." %>
<% end %>