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
use	`import EmptyState from '@clayui/empty-state';`

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.

Open Sandbox

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

Open Sandbox

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="/images/success_state.svg"
					imgSrcReducedMotion="/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.

To see the system’s reduce motion setting in action, refer to the example in the With Animation section.

Open Sandbox

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="/images/success_state.svg"
					imgSrcReducedMotion="/images/success_state_reduced_motion.svg"
					title="Hurray"
				/>
			</div>
		</Provider>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

Without Animation
With Animation
Reduced Motion