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.

installyarn add @clayui/empty-state
versionNPM Version
useimport EmptyState from '@clayui/empty-state';

The usage of animated GIFs are deprecated.

Without Animation

No results found

Sorry, there are no results found

<div className="c-empty-state">
	<div className="c-empty-state-title">
		<span className="text-truncate-inline">
			<span className="text-truncate">No results found</span>
		</span>
	</div>
	<div className="c-empty-state-text">Sorry, there are no results found</div>
	<div className="c-empty-state-footer">
		<button className="btn btn-primary" type="button">Button</button>
	</div>
</div>

Empty State

empty-state-image
No results found

Sorry, there are no results found

<div className="c-empty-state c-empty-state-animation">
	<div className="c-empty-state-image">
		<div className="c-empty-state-aspect-ratio">
			<img
				alt="empty-state-image"
				className="aspect-ratio-item aspect-ratio-item-fluid"
				src="/images/empty_state.svg"
			/>
		</div>
	</div>
	<div className="c-empty-state-title">
		<span className="text-truncate-inline"
			><span className="text-truncate">No results found</span></span
		>
	</div>
	<div className="c-empty-state-text">Sorry, there are no results found</div>
	<div className="c-empty-state-footer">
		<button className="btn btn-secondary" type="button">Button</button>
	</div>
</div>

Search State

empty-state-image
No content yet

This is a description of what the button will allow you to do

<div className="c-empty-state c-empty-state-animation">
	<div className="c-empty-state-image">
		<div className="c-empty-state-aspect-ratio">
			<img
				alt="empty-state-image"
				className="aspect-ratio-item aspect-ratio-item-fluid"
				src="/images/search_state.svg"
			/>
		</div>
	</div>
	<div className="c-empty-state-title">
		<span className="text-truncate-inline">
			<span className="text-truncate">No content yet</span>
		</span>
	</div>
	<div className="c-empty-state-text">
		This is a description of what the button will allow you to do
	</div>
</div>

Success State

empty-state-image
Hurray

You don’t have more notifications to review

<div className="c-empty-state c-empty-state-animation">
	<div className="c-empty-state-image">
		<div className="c-empty-state-aspect-ratio">
			<img
				alt="empty-state-image"
				className="aspect-ratio-item aspect-ratio-item-fluid"
				src="/images/success_state.svg"
			/>
		</div>
	</div>
	<div className="c-empty-state-title">
		<span className="text-truncate-inline"
			><span className="text-truncate">Hurray</span></span
		>
	</div>
	<div className="c-empty-state-text">
		You don't have more notifications to review
	</div>
</div>

With imageProps

Alternative Text
Hurray

You don’t have more notifications to review

<div className="c-empty-state c-empty-state-animation">
	<div className="c-empty-state-image">
		<div className="c-empty-state-aspect-ratio">
			<img
				alt="Alternative Text"
				className="aspect-ratio-item aspect-ratio-item-fluid"
				src="/images/success_state.svg"
				title="Hello World!"
			/>
		</div>
	</div>
	<div className="c-empty-state-title">
		<span className="text-truncate-inline"
			><span className="text-truncate">Hurray</span></span
		>
	</div>
	<div className="c-empty-state-text">
		You don't have more notifications to review
	</div>
</div>
Edit this page on GitHub

Contributors

Table of Contents