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?