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.
Be sure to read the full empty prompt usage guidelines.
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.
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 to transparent 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 encorprate these states with EuiPageTemplate.EmptyPrompt.
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; "transparent" | "accent" | "primary" | "success" | "warning" | "danger" | "plain" | "subdued" | 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 |