Empty State
Empty 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 | 3.101.0 |
Stable3.101.0View in LexiconCHANGELOG
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.
With Animation
Adding an image to the component is easy, just point the imgSrc to the image you want to use
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.