EmptyState

Display actionable feedback when no data is available.

EmptyState is used when there is no data available in a list, table, or other data visualizations.

Import#

import { EmptyState } from '@saas-ui/react'

Usage#

Basic EmptyState#

import { Button } from '@chakra-ui/react'
import { EmptyState } from '@saas-ui/react'
import { FiUsers } from 'react-icons/fi'
export default function NoCustomers() {
return (
<EmptyState
colorScheme="primary"
icon={FiUsers}
title="No customers yet"
description="You haven't imported any customers yet."
actions={
<>
<Button colorScheme="primary">Import customers</Button>
<Button>Create customer</Button>
</>
}
/>
)
}

Composition#

In case you want more control you can compose your own EmptyState component.

import { Button } from '@chakra-ui/react'
import {
EmptyStateContainer,
EmptyStateBody,
EmptyStateIcon,
EmptyStateTitle,
EmptyStateDescription,
EmptyStateActions,
} from '@saas-ui/react'
import { WarningIcon } from '@chakra-ui/icons'
export default function CustomEmptyState() {
return (
<EmptyStateContainer colorScheme="red">
<EmptyStateBody>
<EmptyStateIcon as={WarningIcon} />
<EmptyStateTitle>Whoops, something went wrong</EmptyStateTitle>
<EmptyStateDescription>Where do you want to go?</EmptyStateDescription>
<EmptyStateActions>
<Button>Home</Button>
<Button variant="ghost">Back</Button>
</EmptyStateActions>
</EmptyStateBody>
</EmptyStateContainer>
)
}

Was this helpful?