EmptyStateCard

EmptyStateCard extends the Card component to represent an empty state in your app.

Usage

import { Main, Button, EmptyStateCard } from '@aragon/ui'

function App() {
  return (
    <EmptyStateCard
      text="There is no content."
      action={<Button>>Action</Button>}
    />
  )
}

Demonstration

Props

text

TYPE	DEFAULT VALUE
React node	None (required)

Set some text content for your EmptyStateCard.

Example:

<EmptyStateCard text="You seem to not have any content on your wall." />

illustration

TYPE	DEFAULT VALUE
React node	A default illustration

An illustration to visually represent the empty state.

Example:

<EmptyStateCard illustration={<img src={illustrationSrc} alt="" />} />

action

TYPE	DEFAULT VALUE
React node	None

The action, usually represented by a Button.

Note: the Button will automatically set mode to "strong" and wide to true when used inside EmptyStateCard.

Example:

const App = () => (
  <EmptyStateCard
    text="No votes yet."
    action={<Button label="Create a new vote" onClick={createVote} />}
  />
)