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.

Sources

Storybook Figma

Install

yarn add @workday/canvas-graphics-web

Usage 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.

Example of a "First Use" Empty State

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.

Example of a "User Cleared" Empty State

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.

Example of a "Error" Empty State

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.

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.

Empty State Spacing Guidelines

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 {Graphic} from '@workday/canvas-kit-react/icon';
import {emptyStateGenericGraphic} from '@workday/canvas-graphics-web';

const Example = () => <Graphic src={emptyStateGenericGraphic} />;

This can also be used with any arbitrary SVG.

Props

Props extend from span. Changing the as prop will change the element interface.

Name	Type	Description	Default
`height`	`number \| string`	The height of the graphic
`width`	`number \| string`	The width of the graphic
`grow`	`boolean`	If true, expand the Graphic to fit its container. `grow` takes precedence over both `width` and `height`.	`false`
`src`	`{ svg: string; url: string; }`	The source of the graphic. If `svg` is provided, it will create a Base64-encoded ASCII string from a binary string (i.e., a string in which each character in the string is treated as a byte of binary data) and pass it to an image `src`. If `url` is provided, it will be rendered as an image via the `src` property.
`srcset`	`string \| undefined`	The `srcset` attribute for the image. See MDN for more information. Note: If the `srcset` attribute uses `width` descriptors, the `sizes` attribute must also be present, or the `srcset` itself will be ignored.
`alt`	`string \| undefined`	The `alt` attribute for the image. See MDN for more information.
`sizes`	`string \| undefined`	The `sizes` attribute for the image. See MDN for more information.
`cs`		The `cs` prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using `cs`, you can merge that prop in as well. Any style that is passed to the `cs` prop will override style props. If you wish to have styles that are overridden by the `css` prop, or styles added via the `styled` API, use wherever `elemProps` is used. If your component needs to also handle style props, use {@link mergeStyles } instead. import {handleCsProp} from '@workday/canvas-kit-styling'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; // ... // `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same // function signature, but adds support for style props. return ( <Element {...handleCsProp(elemProps, [ myStyles, myModifiers({ size: 'medium' }), myVars({ backgroundColor: 'red' }) ])} > {children} </Element> )
`children`	`React.ReactNode`
`as`	`React.ElementType`	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. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.	`span`
`ref`	`React.Ref<R = span>`	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`).

iOS Examples

Coming soon!

Android Examples

Coming soon!

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.

FAQ Section