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.

Other stuff such as buttons...

With Icon and Compact

Compact variants, with less top and bottom padding, are useful for smaller contexts.

Title for state, compact variety

Text to appear below. 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.

Other stuff such as buttons...

Page Scope and Graphic

Create your first Email Campaign

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit arcu volutpat cursus ultricies ac, ultricies. Platea sed nibh molestie ut.

Create Email Campaigns Learn More

Page Scope and Graphic with Video

Create your first Email Campaign

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit arcu volutpat cursus ultricies ac, ultricies. Platea sed nibh molestie ut.

Create Email Campaigns Learn More

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."
} do %>
  <p>Other stuff such as buttons...</p>
<% end %>

<h3>With Icon and Compact</h3>
<p> Compact variants, with less top and bottom padding, 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.",
  scope: "compact",
} do %>
  <p>Other stuff such as buttons...</p>
<% end %>

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

<h3>Page Scope and Graphic</h3>
<%= sage_component SageEmptyState, {
  title: "Create your first Email Campaign",
  graphic: image_tag("empty-state-lg.svg", alt: ""),
  scope: "page",
} do %>
  <% content_for :sage_empty_state_text do %>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Elit arcu volutpat cursus ultricies ac, ultricies.
      Platea sed nibh molestie ut.
    </p>
  <% end %>
  <% content_for :sage_empty_state_actions do %>
    <%= sage_component SageButtonGroup, { gap: :sm } do %>
      <%= sage_component SageButton, {
        attributes: { href: "#" },
        style: "primary",
        value: "Create Email Campaigns",
      } %>
      <%= sage_component SageButton, {
        attributes: { href: "#" },
        style: "secondary",
        subtle: true,
        value: "Learn More",
      } %>
    <% end %>
  <% end %>
<% end %>

<h3>Page Scope and Graphic with Video</h3>
<%= sage_component SageEmptyState, {
  title: "Create your first Email Campaign",
  graphic: image_tag("empty-state-lg.svg", alt: ""),
  scope: "page",
} do %>
  <% content_for :sage_empty_state_text do %>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Elit arcu volutpat cursus ultricies ac, ultricies.
      Platea sed nibh molestie ut.
    </p>
  <% end %>
  <% content_for :sage_empty_state_actions do %>
    <%= sage_component SageButton, {
      attributes: { href: "#" },
      style: "primary",
      value: "Create Email Campaigns",
    } %>
    <%= sage_component SageButton, {
      attributes: { href: "#" },
      style: "secondary",
      subtle: true,
      value: "Learn More",
    } %>
  <% end %>
<% end %>

Property	Description	Type	Default
`center_vertical`	If true, the empty state will be adjust to be visually centered inside the entire page context. Meant to be used in pairing with `scope: "page"`.	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`
`scope`	The layout of the component adjusts depending on this context setting: `nil` (default) sets up a "feature"-level layout for use within panels or cards for showing empty state for particular features. `"compact"` similar to the default above, this compacts the spacing a little more for smaller contexts. `"page"` is for use on whole page empty states and is intended to fill the stage.	`nil` \| `"compact"` \| `"page"`	`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_video`	Slot into which video cards or other media can be placed.