Search…
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} />}
/>
)
Last modified 2mo ago
Copy link
On this page
Usage
Demonstration
Props