The illustrationType "generic" of the EmptyStateIllustration component is deprecated in SWAN v3.24
A set of context-specific illustrations has been introduced and should be used in place of the generic illustration.
Empty State
An indication to the user that there is no content to display in the current view. Provides an explanation and the next best action.
styleKeys: emptyState
Use Empty State...
- When there is no content to display in a particular section of the UI. For example, when a user clears a screen, finishes a piece of work, completes a task, or has no data in a particular location.
- To create an opportunity to engage users positively by providing context, direction and guidance on how best to start, continue or complete a task.
Don't use Empty State...
- For validating user inputs. Instead, use a
FormErroron Standard Form.
Default
The most common case for Empty State is to display EmptyStateIllustration, EmptyStateTile, EmptyStateDescription, and a single Button within EmptyStateActions. All subcomponents are technically optional.
The preview has been updated.
Illustration
An illustration can be placed inside of an Empty State. On EmptyStateIllustration, use illustrationType to set the illustration according to the semantic intent of the Empty State content. Illustrations that are available include:
The preview has been updated.
Title
The EmptyStateTitle subcomponent should contain the problem definition to explain why the view is empty. See Problem definition for more information.
Description
The EmptyStateDescription subcomponent should contain the solution definition to outline the users' next steps. See Solution definition for more information.
Actions
The EmptyStateActions subcomponent should contain the next best action to get the user back on task. For most cases, use a single, Primary Button. However, some contexts may require multiple Buttons. See Next best action for more information.
The preview has been updated.
Footer
The EmptyStateFooter subcomponent can be used to provide additional information or ancillary links that are tangential to the task at hand. See Ancillary information for more information.
The preview has been updated.
Use the Status Message component to highlight information, such as contacting the Help Center.
The preview has been updated.
Size
Use size="large" to increase the size of an Empty State. Potential uses include full-page empty states such as an error page.
The preview has been updated.
Anatomy
Empty State content should:
- inform and guide users by explaining what's happened and why
- explain what path(s) the user can take to resolve or progress their experience, including paths to 'learn more' or cancel
Problem definition
Explain the problem and why it happened. When possible, present a single problem. This should be represented by the EmptyStateTile subcomponent.
EmptyStateTitle should be a heading, styled in sentence case, with no trailing full stop.
Solution definition
Describe how to resolve the problem and/or progress in a valuable direction. Some Empty States may have more than one solution. This should be represented by the EmptyStateDescription subcomponent.
Next best action
Present clear actions, such as Buttons or Inputs to enable users to progress in a valuable direction. A single action is best, but some cases may need two or three actions. This should be represented by the EmptyStateActions subcomponent.
Next best actions should use imperative verbs. Avoid vague or overly-technical terms and be mindful of words that are not inclusive or accessible. Words should be meaningful in context.
Examples
Imperative verbs: Try, Remove, Explore, Upload, Copy, Create
Vague, overly-technical ,not inclusive/accessible: Abort, Clone, Click
Ancillary information (optional)
In addition to the next best action, you may provide supporting information or a link for users to learn more. If the next best action contains an input, any additional actions should be placed in the footer. Ancillary information should be represented by the EmptyStateFooter subcomponent.
General principles
- Empty States are chances to encourage people to interact further with our products and services
- They educate people about where they can go next or motivate them to explore
- Use actionable and instructive language
- Avoid dead-ends
- Focus on clarity and user guidance
- Display contextual information or suggestions to prompt the user to continue their journey. This is a unique opportunity to weave in a more curated experience based on customer data and past purchases. For example:
- Subscriptions: guide users to explore new plans.
- Empty cart: prompt users to continue shopping with potential upsell opportunities or areas to explore.
- Where relevant, encourage product discovery with ‘Buy it again’.
Layout
The Empty State component doesn't reserve space around itself. As a general rule, when placing the Empty State within a layout, use the between-subsections semantic space value above and below the component.
The preview has been updated.
Scenarios
Empty States fall into two scenarios:
Dynamic
A customer action populates the Empty State. Dynamic scenarios involve customizing the Empty State by integrating customer data. Customer interests or past purchases populate an action.
For example, when a customer finishes creating a new logo, we present a chance to add it to business cards (because they ordered some last year).
Fixed
There is nothing the customer can do to populate the Empty State. The next best action in fixed scenarios would be a generic CTA or another helpful link.
For example, when a customer visits their Orders page before they've made an order, we present an Empty State informing them that orders will appear in this place. We could suggest one or more shopping categories as the next best action.
Props
EmptyState
This component is implemented using the
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.See core props for additional props that can be applied to this component.
| prop | type | required | description | default |
|---|---|---|---|---|
| size | "standard" | "large" | false | Use `standard` size for most empty state content. Use `large` size for full-page empty states | standard |
EmptyStateIllustration
This component is implemented using the
<img /> as the root element. You can utilize the native attributes supported by <img /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.See core props for additional props that can be applied to this component.
| prop | type | required | description | default |
|---|---|---|---|---|
| illustrationType | "search" | "success" | "error" | "orders" | "myProjects" | "liveChat" | "generic" | "designServices" | "cart" | "brief" | true | Type of illustration to display | null |
EmptyStateTitle
This component is implemented using the
<p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.See core props for additional props that can be applied to this component.
EmptyStateDescription
This component is implemented using the
<p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.See core props for additional props that can be applied to this component.
EmptyStateActions
This component is implemented using the
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.See core props for additional props that can be applied to this component.
EmptyStateFooter
This component is implemented using the
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.See core props for additional props that can be applied to this component.
How does Empty State meet your needs?