Empty State
View in LexiconEmpty states provide users with feedback on the reasons behind the empty state and what they can do to move out of the empty state.
| install | yarn add @clayui/empty-state |
|---|---|
| version |  |
| use | import EmptyState from '@clayui/empty-state'; |
Table of Contents
Without Animation
By ommiting the imgSrc prop you will render a default Empty State component.
Even without an animation you can still pass in children to the component as seen with the ClayButton component in this example.
import {Provider} from '@clayui/core';
import EmptyState from '@clayui/empty-state';
import Button from '@clayui/button';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<EmptyState>
<Button displayType="primary">Button</Button>
</EmptyState>
</div>
</Provider>
);
}
With Animation
Adding an image to the component is easy, just point the imgSrc to the image you want to use
import {Provider} from '@clayui/core';
import EmptyState from '@clayui/empty-state';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<EmptyState
description="You don't have more notifications to review"
imgProps={{alt: 'Alternative Text', title: 'Hello World!'}}
imgSrc="https://clayui.com/images/success_state.svg"
imgSrcReducedMotion="https://clayui.com/images/success_state_reduced_motion.svg"
title="Hurray"
/>
</div>
</Provider>
);
}
Reduced Motion
The CSS class c-prefers-reduced-motion forces the unanimated image to display. It bypasses the system’s reduced motion setting. You can add this class on the body tag or a specific component’s parent container to disable all animations and transitions.
The property imgSrcReducedMotion is used to provide an alternate image if a user has requested to minimize the amount of non-essential motion to use via the class c-prefers-reduced-motion or the operating system.
There is an accompanying property, imgPropsReducedMotion, where specific properties can be passed to the reduced motion img tag. If it is not defined, it uses the properties defined in imgProps.
import {Provider} from '@clayui/core';
import EmptyState from '@clayui/empty-state';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<EmptyState
description="You don't have more notifications to review"
imgProps={{alt: 'Alternative Text', title: 'Hello World!'}}
imgSrc="https://clayui.com/images/success_state.svg"
imgSrcReducedMotion="https://clayui.com/images/success_state_reduced_motion.svg"
title="Hurray"
/>
</div>
</Provider>
);
}
Table of Contents