EmptyState

Deprecated component

EmptyState component has been deprecated and is not supported or recommended for use.

Empty State component was removed in version 4

EmptyState component got removed in the version 4.

If you are using this component in your project you can refactor to use other existing components.

You must migrate existing code:

<EmptyState
headingProps={{ text: 'Heading' }}
imageProps={{
url: 'https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=200',
width: '340px',
height: '250px',
description: 'Image descriptionProps',
}}
descriptionProps={{
text: 'This is a descriptionProps for the empty state. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate, sem a porttitor porttitor, velit nulla lacinia dolor, sit amet interdum ligula lectus hendrerit sem. Aliquam ultricies viverra tincidunt.',
}}
/>

to:

<Flex flexDirection="column" justifyContent="center" alignItems="center">
<Flex flexDirection="column" justifyContent="center" alignItems="center">
<img
src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=200&h=200"
alt="Illustration"
/>
<Subheading marginTop="spacingM" marginBottom="spacingM">
Heading
</Subheading>
<Paragraph>
{' '}
This is a descriptionProps for the empty state. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis vulputate, sem a porttitor porttitor, velit
nulla lacinia dolor, sit amet interdum ligula lectus hendrerit sem. Aliquam
ultricies viverra tincidunt.{' '}
</Paragraph>
</Flex>
</Flex>

Help improve this page