Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

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
version3.101.0
  • Examples
  • Markup
  • API

Stable3.101.0View in LexiconCHANGELOGstorybook demos

  • Without Animation
  • Empty State
  • Search State
  • Success State
  • With imageProps

Without Animation

No results found
Sorry, there are no results found
Copied!
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
Copied!
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.gif"
			/>
		</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
Copied!
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.gif"
			/>
		</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
Copied!
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.gif"
			/>
		</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
Copied!
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.gif"
				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>

How can this be improved? Create an issue!