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.

install	yarn add @clayui/empty-state
version
use	import EmptyState from '@clayui/empty-state';

Without Animation

<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

No results found

Sorry, there are no results found

Button

<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

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

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

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>