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