EmptyState

Display actionable feedback when no data is available.

Theming

The EmptyState component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy

  • container
  • body
  • icon
  • title
  • descripton
  • actions
  • footer

Default theme

import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
import { emptyStateAnatomy } from '@saas-ui/theme/anatomy'
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(emptyStateAnatomy.keys)
const baseStyle = definePartsStyle((props) => {
const { colorScheme: c } = props
return {
icon: {
boxSize: [10, null, 12],
color: `${c}.500`,
_dark: {
color: `${c}.200`,
},
},
title: {
mt: 8,
},
actions: {
mt: 8,
},
}
})
const variantCentered = definePartsStyle((props) => {
return {
body: {
display: 'flex',
flexDirection: 'column',
textAlign: 'center',
alignItems: 'center',
},
}
})
export const emptyStateTheme = defineMultiStyleConfig({
baseStyle,
variants: {
centered: variantCentered,
},
})

Was this helpful?