Components

Empty state

Used when there is no data to display to describe what the user can do next. Empty state provides explanation and guidance to help user progress.

Basic usage

First, import the component.

import {EmptyState} from '@pleo-io/telescope'

Then pass a title, and optionally a subtitle.

<EmptyState
    title="You don't have any cards yet."
    subtitle="Once you've ordered and received your cards they'll appear here."
/>

Pass the illustration element as illustration to render it above the text. Import it from @pleo-io/telescope-illustrations/web.

import {Card} from '@pleo-io/telescope-illustrations/web'

<EmptyState illustration={<Card />} title="You don't have any cards yet." />

Pass an action, such as a Button, to offer a next step.

<EmptyState
    illustration={<Card />}
    title="You don't have any cards yet."
    action={<Button variant="primary">Order a card</Button>}
/>

Pass a back callback to render a secondary back button below the content.

<EmptyState illustration={<Card />} title="No results" back={() => navigate(-1)} />

Use wide to allow the text to take up more horizontal space.

<EmptyState illustration={<Card />} wide title="You don't have any cards yet." />

The back button label is read from the TelescopeProvider translations as EmptyState.BackButton.

Didn't find what you were looking for?