Empty States
Empty states are a pivotal point in the user journey. They are opportunities to build rapport, drive engagement, educate, or delight the user. Empty states should never actually feel empty.
yarn add @workday/canvas-graphics-webyarn add @workday/canvas-graphics-webUsage Guidance
Use Empty States when there is no data to show, especially in applications that have not been configured by the user. They’re also commonly used during onboarding experiences and initial usage.
Ideally, they will orient the user by providing feedback based on the user's last interaction (for example, an Empty State for a cleared Inbox) or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action.
Empty States are commonly used to:
- Communicate application or process status to the user
- Increase the learnability of the application or help discover a new feature
- Provide a path for getting up and running with a task
Primary Types of Empty States
First Use
Present this type of Empty State when the user interacts with an application or a particular feature for the first time.
Every app has to start its users somewhere, so think of an Empty State as a blank canvas and paint something useful on it. While the screen may have started blank, with the help of an empty state, it becomes a vehicle for completing a task or increasing engagement.
User Cleared
Present this type of Empty State when the user has just completed a task or workflow, or has cleared all data associated with a Workday feature.
While using Workday, a user might encounter a situation where there is no task available. We call this the “user-cleared” Empty State. It’s an ideal opportunity to encourage the user toward new or next steps, or simply congratulate them on the accomplishment of completing the previous interaction flow.
After task completion, feedback is essential:
- Inform the user that their tasks are complete.
- Reward the user for accomplishing the task.
- Encourage optimal next steps.
Errors
Present this empty state when a user has encountered a roadblock during the interaction.
Errors are inevitable and can be caused by the user or Workday. It’s critical to anticipate errors and to inform the user of what went wrong, and why there is an error. Communicate this in a manner that is both helpful and makes sense to the user.
Variants
There are two types of Empty State variants and their usage depends on the complexity of the product’s layout and the corresponding task or action involved.
Primary
Use the primary Empty State to bring attention and focus to the users task at hand. This variation is typically used when the corresponding task is the user’s primary action or there are not a lot of competing actions on the page.
Low-Emphasis
The low-emphasis Empty State is best used in more dense, noisy interfaces or when there are competing actions in close proximity. They allow the Empty States to blend into congested layouts more subtlety. This variation is typically used when the corresponding task is not the primary focus of your user or when there is no action required.
Spacing & Positioning
All Empty States have a width of 360px to encourage consistent use across all of our products.
Empty States are scalable for use in smaller areas of your UI. Scaling is best reserved for more dense interfaces or when there are competing actions or Empty States in close proximity.
Although Empty States have some spacing included in their container, be sure to provide additional padding of at least 32px to avoid crowding the illustration. This white space is particularly important when using Empty States within a UI containing components such as a modal, card, or table.
Voice and Tone
Our Empty States should orient the user and encourage them to get back in the flow. They should never make users feel guilty because they haven’t completed a task or process. How we communicate this is an important part of making use of Empty States. Reference the Canvas Design System UI Text Style Guide page on Empty State text for help writing thoughtful, effective copy for your Empty States.
Web Examples
The graphics shipped in @workday/canvas-graphics-web are just SVGs with some additional metadata.
If you'd like to easily use them in React, use the Graphic component from
@workday/canvas-kit-react/icon:
import React from 'react';import {Graphic} from '@workday/canvas-kit-react/icon';import {emptyStateCloudGraphic} from '@workday/canvas-graphics-web';export default () => <Graphic src={emptyStateCloudGraphic} />;
This can also be used with any arbitrary SVG.
Props
| Name | Type | Default | Description |
|---|---|---|---|
src* | CanvasGraphic | The graphic to display from `@workday/canvas-graphics-web`. | |
width | string | number | undefined | width of graphic | The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions. |
height | string | number | undefined | height of graphic | The height of the Graphic in `px`. If the Graphic's `height` is set, its `width` will be set to `100%`. |
grow | boolean | undefined | false | If true, expand the Graphic to fit its container. `grow` takes precedence over both `width` and `height`. |
shouldMirror | boolean | undefined | false | If set to `true`, transform the SVG's x-axis to mirror the graphic |
ref | React.Ref<any> | Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`). | |
as | "symbol" | "object" | "small" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 156 more ... | React.ComponentType<any> | Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef` and spread extra props to a root element. |
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section