Empty State

The Empty State is displayed for main application features that have never been interacted with before. The Empty State is also used for smaller features in the app that primarily focus on data entry and have no data to show.

React Component

With Icon

Title for state

Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.

Other stuff such as buttons...

With Icon and Compact

Compact variants, with a smaller icon, are useful for smaller contexts.

Title for state, compact variety

Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.

Other stuff such as buttons...

With Graphic

Title for state, with graphic instead of icon

Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.

Other stuff such as buttons...

Sage Component

SageEmptyState

<h3>With Icon</h3>
<%= sage_component SageEmptyState, {
  icon: "trash",
  title: "Title for state",
  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.",
} do %>
  <p>Other stuff such as buttons...</p>
<% end %>

<h3>With Icon and Compact</h3>
<p> Compact variants, with a smaller icon, are useful for smaller contexts.</p>
<%= sage_component SageEmptyState, {
  icon: "bold",
  title: "Title for state, compact variety",
  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.",
  size: "compact",
} do %>
  <p>Other stuff such as buttons...</p>
<% end %>

<h3>With Graphic</h3>
<%= sage_component SageEmptyState, {
  graphic: image_tag("card-placeholder-lg.png", alt: ""),
  title: "Title for state, with graphic instead of icon",
  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.",
} do %>
  <p>Other stuff such as buttons...</p>
<% end %>

Property	Description	Type	Default
`center_vertical`	If true, the empty state will be visually centered inside the entire page context.	Boolean	`false`
`icon`	Adds an icon above the content.	String	`nil \| Icon name from Sage icons`
`graphic`	Adds a graphic above the content.	String	`nil`
`size`	The size of the icon adjusts depending on this context setting: `nil` (default) sets up a "feature"-level layout for use on whole page empty states and is intended to fill the stage. `"compact"` similar to the default above, this compacts the spacing a little more for smaller contexts.	`nil` \| `"compact"`	`nil`
`text`	Text for empty state.	String	`nil`
`title`	Title for empty state.	String	`nil`
`title_tag`	Sets which HTML heading tag to use on the title.	One of `h1` through `h6`	`h2`
Content Slots
`:sage_empty_state_actions`	Slot into which buttons or other actions can be placed.
`:sage_empty_state_text`	Slot into which text can be placed.
`:sage_empty_state_video`	Slot into which video cards or other media can be placed.