Empty prompt
The EuiEmptyPrompt is the building block to create an empty state. You can use it as a placeholder for any type of empty content. They are especially helpful for replacing entire pages or parts of a product that contain no content.
Component
While no one piece of content is required, each EuiEmptyPrompt should contain at least a
title (wrapped in an HTML heading element) and/or a description. They usually contain one or more actions that promotes the primary call-to-actions. You can also provide a footer to direct users towards making informed decisions.
Usage
Less content, more actions
You can remove parts of the prompt to simplify it. You can also provide an array of multiple actions. Be sure to list primary actions first and secondary actions as empty buttons.
Panel options
The EuiEmptyPrompt is wrapped by
EuiPanel. By default, the panel is set totransparent but you can customize other panel options like color, hasBorder and paddingSize. Changing the color prop will also attempt to adjust the iconColor and footer color.
Read the usage guidelines to better understand when to use certain panel props.
Title sizes and icon colors
Other customization options include changing thetitleSize to any of the EuiTitle sizes and iconColor. When using an application or solution logo as the iconType, you can reset to the multi-tone colors with iconColor="default"
Loading and error prompts
Empty prompts can also be used to emulate loading and error states, by utilizing the same patterns.
For loading states, instead of passing a iconType, you can provide a custom icon and pass in one of our loading components.
For error states, you can simply set the color to danger.
Layout
You can supply a layout of either "horizontal" or "vertical" with the default being vertical. When creating empty states we want the content to be short and straight to the point. So most of the time, the vertical layout is enough. All the content will be center aligned and this type of text alignment only works with small content.
When you have longer body text with multiple calls to action, you can use the horizontal layout. This layout works best when you can provide a larger graphic like an illustration as the icon. For consistency, we recommend providing the illustration using a EuiImage with size="fullWidth".
More types of empty states
EuiEmptyPrompt can be used for more than just empty pages. The following example showcases different types of empty states that you can create with the EuiEmptyPrompt. For a full list see the usage guidelines.
Using in a page template
When using a EuiEmptyPrompt in a EuiPageTemplate, we recommend using the namespaced component so the template can determine which how to display the empty prompt based on the rest of the template configuration.
The following example shows the usage of the EuiPageTemplate.EmptyPrompt namespaced component.
You can then tie multiple types of empty states together to create a seamless loading to empty or loading to error experience. The following example shows how to incorporate these states with EuiPageTemplate.EmptyPrompt.
Guidelines
Anatomy
A useful empty state will let the user know what's happening, why it's happening, and what to do about it. It can contribute to a more compelling user experience and add more value to the business if done right.
To make the empty state clear, follow this pattern:
- Icon or illustration (optional): A meaningful representation of the the solution or context.
- Title: Answers the question "What's happening?". Is it an error? Is it loading?
- Description: Why is it happening? Explain why the space is empty and guide the users through the required actions.
- Action(s): Your call to actions should answer the question "What will solve the issue?". Lead the users to take action or guide them about the next steps.
- Footer (optional): Use this section to reference documentation or link to an area where users can learn more about the issue they are facing.
Empty state types, goals, and recommendations
The following scenarios detail the most common empty states use cases and provide recommendations for use with EuiPageTemplate.
What is the page template?
- Description
First time use.
- Goal
Help users understand how they can start using the product.
For no data use cases, consider using a EuiCard. In Kibana, you just need to pass a no data configuration into your KibanaPageTemplate(external, opens in a new tab or window) to display a specific UI that guides users to add data.
- Action
Actions specific to first use. For example: “Add cases”, “Create job”, “Add workpad”.
- Recommended panel color
Set
color="subdued"to make users not getting distracted and focus on the content.Consider the transparent color if the empty prompt is contained in another component.
Vertical vs. horizontal
The vertical layout is perfect when the content is small — a title and two paragraphs at most. You can use this layout with an icon, an illustration, or no icons at all.
Use the horizontal layout when you have a long description, multiple calls to action, and a footer. For this type of layout, an illustration is required.
Use the vertical layout when the text is 1 to 2 sentences.
Use the horizontal layout when you have a long description, and you can provide an illustration.
Icons and illustrations
Icons and illustrations must first and foremost communicate meaning. They are also an opportunity to delight users and show our Elastic brand.
When using an illustration, bear in mind that they stand out a lot. Use one illustration per page. Having multiple illustrations might make the page too crowded.
Do: An illustration works better in a horizontal layout.
Don't: Avoid using icons and illustrations that don't mean anything and are not related to the content.
Learn more links
"Learn more" links are optional. You can use them in your empty prompt to link to documentation where users can get more detailed help.
Include the link after the description when the empty prompt doesn't contain a call to action. If there is a call to action, include the link in the footer.
Add the "Learn more" link after the description when the empty prompt doesn't contain a call to action.
Add the "Learn more" link in the footer when the empty prompt contains a call to action.
Multiple empty states
When a page has multiple empty states, avoid using multiple primary actions and multiple icons or illustrations.
Use secondary actions and no icons or illustrations. This way, the visual noise will be reduced. Consider using an illustration or a primary action if you want to make one of the empty states stand out.
Do: Use secondary actions and no icons or illustrations when displaying multiple empty states.
Don't: Avoid mixing different types of empty states. Be consistent.
Less content, more actions
Simplify the prompt by removing unneeded parts. Multiple actions can be provided as an array but list primary actions first and secondary actions as empty buttons.
Props
EuiEmptyPrompt
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop color# | Description and type Background color of the panel; PanelColor | Default value transparent |
Prop hasBorder# | Description and type Adds a slight 1px border on all edges. boolean | Default value |
Prop hasShadow# | Description and type Adds a medium shadow to the panel; boolean | Default value |
Prop iconType# | Description and type Type: IconType | Default value |
Prop iconColor# | Description and type Color for string | Default value |
Prop icon# | Description and type Custom icon replacing the one generated by ReactNode | Default value |
Prop title# | Description and type Requires passing a single element that gets wrapped in an EuiTitle. ReactElement | Default value |
Prop titleSize# | Description and type Choose from one of the "xs" | "s" | "m" | "l" | "xxxs" | "xxs" | Default value m |
Prop body# | Description and type Gets wrapped in a subdued EuiText block. ReactNode | Default value |
Prop actions# | Description and type Pass a single or an array of actions (buttons) that get stacked at the bottom. ReactNode | Default value |
Prop footer# | Description and type Optionally provide a footer. Accepts any combination of elements. ReactNode | Default value |
Prop layout# | Description and type Sets the layout. When "horizontal" | "vertical" | Default value vertical |
Prop paddingSize# | Description and type Padding applied around the content and footer. "s" | "m" | "l" | "none" | Default value l |