Empty State

View in Lexicon

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.

installyarn add @clayui/empty-state
versionNPM Version
useimport 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.

Open on CodeSandboxOpen 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 on CodeSandboxOpen 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="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.

To see the system’s reduce motion setting in action, refer to the example in the With Animation section.
Open on CodeSandboxOpen 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="https://clayui.com/images/success_state.svg"
					imgSrcReducedMotion="https://clayui.com/images/success_state_reduced_motion.svg"
					title="Hurray"
				/>
			</div>
		</Provider>
	);
}

API Reference

EmptyState

({ children, className, description, imgProps, imgPropsReducedMotion, imgSrc, imgSrcReducedMotion, small, title, ...otherProps }: IProps) => JSX.Element
Parameters
Properties

description

string | undefined= "Sorry, there are no results found"

Message the user will see describing what they can do when on this screen

imgProps

React.ImgHTMLAttributes<HTMLImageElement> | undefined

HTMLImage element attributes to add to the image within the component

imgPropsReducedMotion

React.ImgHTMLAttributes<HTMLImageElement> | undefined

HTMLImage element attributes to add to the reduced motion image within the component

imgSrc

string | undefined

Source of the image to signify the state

imgSrcReducedMotion

string | null | undefined

Source of the image to show when .c-prefers-reduced-motion is active

small

boolean | undefined

Indicates empty state should be a small variant.

title

string | null | undefined= "No results found"

Title of the message highlighting the description

Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko, Ilza Medeiros, Patrick Yeo

Last edited February 20, 2025 at 2:04:18 AM

Table of Contents