Empty State

Components

Empty State

Empty states are moments designed to prevent confusion when the primary contents of a page cannot be displayed.

Empty states show up in various scenarios. For example, they can be displayed with a simple error message when a page content is unable to load.

Empty state imagery typically uses the component.

import { EmptyState } from '@sproutsocial/racine'

<EmptyState
  media={<Box alignItems="center" display="flex" justifyContent="center"><SpotIllustration name="computer-error" /></Box>}
  headline="Unable to load page"
  subtext=" Oops, something went wrong and this page was not able to load."
  primaryAction={<Button>Try Again</Button>}
  secondaryAction={<Button>I'll do this later</Button>}
/>

<EmptyState
  media={<Box alignItems="center" display="flex" justifyContent="center"><SpotIllustration name="computer-error" /></Box>}
  headline="Unable to load page"
  subtext=" Oops, something went wrong and this page was not able to load."
  primaryAction={<Button>Try Again</Button>}
  secondaryAction={<Button>I'll do this later</Button>}
/>

Properties

Name	Type	Description
`media`	`React.Node`	An image in (preferably in SVG format)
`headline`	`React.Node`	A headline describing the empty state
`subtext`	`React.Node`	Optional description of the empty state
`primaryAction`		Element for the primary call-to-action
`secondaryAction`		Element for any secondary call-to-action