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	3.116.0

Stable 3.116.0 View in Lexicon CHANGELOG

Without Animation
Empty State
Search State
Success State
With imageProps

The usage of animated GIFs are deprecated.

Without Animation

No results found

Sorry, there are no results found

Code Sample (expand to see it)

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

Empty State

empty-state-image

No results found

Sorry, there are no results found

Code Sample (expand to see it)

<div class="c-empty-state c-empty-state-animation">
	<div class="c-empty-state-image">
		<div class="c-empty-state-aspect-ratio">
			<img
				alt="empty-state-image"
				class="aspect-ratio-item aspect-ratio-item-fluid"
				src="/images/empty_state.svg"
			/>
		</div>
	</div>
	<div class="c-empty-state-title">
		<span class="text-truncate-inline"
			><span class="text-truncate">No results found</span></span
		>
	</div>
	<div class="c-empty-state-text">Sorry, there are no results found</div>
	<div class="c-empty-state-footer">
		<button class="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

Code Sample (expand to see it)

<div class="c-empty-state c-empty-state-animation">
	<div class="c-empty-state-image">
		<div class="c-empty-state-aspect-ratio">
			<img
				alt="empty-state-image"
				class="aspect-ratio-item aspect-ratio-item-fluid"
				src="/images/search_state.svg"
			/>
		</div>
	</div>
	<div class="c-empty-state-title">
		<span class="text-truncate-inline"
			><span class="text-truncate">No content yet</span></span
		>
	</div>
	<div class="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

Code Sample (expand to see it)

<div class="c-empty-state c-empty-state-animation">
	<div class="c-empty-state-image">
		<div class="c-empty-state-aspect-ratio">
			<img
				alt="empty-state-image"
				class="aspect-ratio-item aspect-ratio-item-fluid"
				src="/images/success_state.svg"
			/>
		</div>
	</div>
	<div class="c-empty-state-title">
		<span class="text-truncate-inline"
			><span class="text-truncate">Hurray</span></span
		>
	</div>
	<div class="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

Code Sample (expand to see it)

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