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
  • With Animation
  • Reduced Motion

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.

Copied!
Code Sample (expand to see it)

With Animation

Adding an image to the component is easy, just point the imgSrc to the image you want to use

Copied!
Code Sample (expand to see it)

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.
Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!