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.
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.
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.
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 |
---|---|---|---|
|
If true, the empty state will be adjust to be visually centered inside the entire page context. Meant to be used in pairing with |
Boolean |
|
|
Adds an icon above the content. |
String |
|
|
Adds a graphic above the content. |
String |
|
|
The layout of the component adjusts depending on this context setting:
|
|
|
|
Text for empty state. |
String |
|
|
Title for empty state. |
String |
|
|
Sets which HTML heading tag to use on the title. |
One of |
|
Content Slots | |||
|
Slot into which video cards or other media can be placed. |