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.

Unable to load page

Oops, something went wrong and this page was not able to load.

import { EmptyState } from '@sproutsocial/racine'

<EmptyState
  media={
    <Image
      alt="Something is Wrong"
      src="https://d672eyudr6aq1.cloudfront.net/img/Publishing/EmptyStates/somethings_wrong.svgz"
      m={0}
    />
  }
  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={
    <Image
      alt="Something is Wrong"
      src="https://d672eyudr6aq1.cloudfront.net/img/Publishing/EmptyStates/somethings_wrong.svgz"
      m={0}
    />
  }
  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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Description
`media`	`ReactNode`	A required image, SVG format
`headline`	`ReactNode`	A required headline describing the empty state
`subtext`	`ReactNode`	An optional description further describing the empty state
`primaryAction`	`unknown`	An optional call-to-action
`secondaryAction`	`unknown`	An optional additional call-to-action