Empty state

Empty state provide explanation of an interface in absence of data. Empty states should orient the user, or communicate benefits of a feature. For general error messages, use the error component instead.

  • Install
    npm install @pluralsight/ps-design-system-emptystate
  • Import
    import EmptyState from '@pluralsight/ps-design-system-emptystate'

Examples

Default full page empty state

import React from 'react'
import EmptyState from '@pluralsight/ps-design-system-emptystate'
import Button from '@pluralsight/ps-design-system-button'
const Comp = () => (
<EmptyState
heading={
<EmptyState.Heading>Alohamora wand elf parchment</EmptyState.Heading>
}
caption={
<EmptyState.Caption>
Hedwig Daily Prophet treacle tart full-moon Ollivanders You-Know-Who
cursed. Fawkes maze raw-steak Voldemort Goblin Wars snitch Forbidden
forest grindylows wool socks.
</EmptyState.Caption>
}
illustration={
<EmptyState.Illustration name={EmptyState.Illustration.names.magnify} />
}
actions={
<EmptyState.Actions>
<Button appearance={Button.appearances.stroke}>Do a Thing</Button>
</EmptyState.Actions>
}
/>
)
export default Comp

Layout scales from ‘large’ to ‘small’ based on container width. OR may be set as small

import React from 'react'
import EmptyState from '@pluralsight/ps-design-system-emptystate'
import Button from '@pluralsight/ps-design-system-button'
const Comp = () => (
<EmptyState
heading={
<EmptyState.Heading>Alohamora wand elf parchment</EmptyState.Heading>
}
caption={
<EmptyState.Caption>
Hedwig Daily Prophet treacle tart full-moon Ollivanders You-Know-Who
cursed. Fawkes maze raw-steak Voldemort Goblin Wars snitch Forbidden
forest grindylows wool socks.
</EmptyState.Caption>
}
illustration={
<EmptyState.Illustration name={EmptyState.Illustration.names.magnify} />
}
actions={
<EmptyState.Actions>
<Button appearance={Button.appearances.stroke}>Do a Thing</Button>
</EmptyState.Actions>
}
size={EmptyState.sizes.small}
/>
)
export default Comp

Alternatives

Consider alternatives to empty states. Instead of an empty experience, might there be starter, educational, or sample content to present to users to help them learn about the product and start using it right away?

Sample content

If the screen is intended to be populated with content by a user, consider suggesting samples or recommendations to ease the effort of getting started.

Educational content

A single graphic and message may not be enough to convey the purpose of a feature. Consider animated or video walkthroughs, but keep them brief and dismissible.

Best match suggestion

If the absence of data occurs due to a user query such as a search, consider displaying a best match instead of nothing at all.

Copy

Follow voice and tone guidelines when writing copy for empty states. Appropriate empty statement consist of a short declarative statement of what occurred, followed by a brief sentence giving more context if necessary. Provide a clear CTA button that’s no more than 2-3 words. Write clearly and conversationally like you would if you were talking to someone. Try to use an active voice

Illustration set

import React from 'react'
import EmptyState from '@pluralsight/ps-design-system-emptystate'
import { layout } from '@pluralsight/ps-design-system-core'
import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
const titleize = str =>
str.toLowerCase().replace(/(?:^|\s|-)\S/g, x => x.toUpperCase())
const Comp = () => {
const sizes = Object.values(EmptyState.sizes)
const [activeSize, setActiveSize] = React.useState(sizes[1])
const handleSizeChange = (evt, index) => setActiveSize(sizes[index])
return (
<div>
<style jsx>{`
.container {
position: relative;
}
.toggle {
position: absolute;
top: ${layout.spacingMedium};
left: ${layout.spacingMedium};
z-index: 1;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
padding-top: ${layout.spacingXXLarge};
padding-bottom: ${layout.spacingMedium};
}
`}</style>
<div className="container">
<div className="toggle">
<ViewToggle onSelect={handleSizeChange}>
{sizes.map((id, index) => (
<ViewToggle.Option active={id === activeSize} key={id}>
{titleize(id)}
</ViewToggle.Option>
))}
</ViewToggle>
</div>
<div className="grid">
{Object.values(EmptyState.Illustration.names).map(name => (
<EmptyState
key={name}
style={{ alignSelf: 'center', margin: '0', padding: '0' }}
heading={
<EmptyState.Heading style={{ fontSize: 14 }}>
{name}
</EmptyState.Heading>
}
illustration={<EmptyState.Illustration name={name} />}
size={activeSize}
/>
))}
</div>
</div>
</div>
)
}
export default Comp

Custom illustration

If no illustration in the standard set is found to be suitable, you may officially aire your grievance, or... consider creating a custom illustration within the guidelines of the predefined style.

import React from 'react'
import EmptyState from '@pluralsight/ps-design-system-emptystate'
const Comp = () => (
<EmptyState
heading={
<EmptyState.Heading>Alohamora wand elf parchment</EmptyState.Heading>
}
caption={
<EmptyState.Caption>
Hedwig Daily Prophet treacle tart full-moon Ollivanders You-Know-Who
cursed. Fawkes maze raw-steak Voldemort Goblin Wars snitch Forbidden
forest grindylows wool socks.
</EmptyState.Caption>
}
illustration={
<EmptyState.Illustration>
<svg viewBox="0 0 128 128" aria-hidden role="img">
<path
fill="currentColor"
d="M44.99 43.356v-16.77L109.792 64 44.99 101.414v-16.77l-14.897 8.601v-58.49l14.897 8.601zm0 7.162l-8.695-5.02v37.003l8.695-5.02V50.518zm6.202 30.544v9.609L97.387 64 51.192 37.329v9.608l29.552 17.062-29.552 17.063zm0-7.162l17.147-9.901-17.147-9.9v19.8z"
/>
</svg>
</EmptyState.Illustration>
}
/>
)
export default Comp

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests
Manual audit

Props

EmptyState

Name
Type
Description
Default
actionsEmptyState.Action
captionEmptyState.Caption
headingEmptyState.Heading
illustrationEmptyState.Illustration
size
small | large
disable resizing layout and set explicit size (from EmptyState.sizes)

EmptyState.Heading

Name
Type
Description
Default
asstringheading tagNameh1

EmptyState.Illustration

Name
Type
Description
Default
name
bookmark | channel | cloud | code | data | document | error | image | lightning | lock | magnify | people | signal | skillIQ | upload | video | wrench | zen
the illustration name (from Illustration.names)