ReactNode
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#
<EmptyStatecolorScheme="primary"icon={FiUsers}title="No customers yet"description="You haven't imported any customers yet."actions={<><Button label="Import customers" colorScheme="primary" /><Button label="Create customer" /></>}/>
Composition#
<EmptyStateContainer colorScheme="purple"><EmptyStateBody><EmptyStateIcon as={WarningIcon} /><EmptyStateTitle>Whoops, something went wrong</EmptyStateTitle><EmptyStateDescription>Where do you want to go?</EmptyStateDescription><EmptyStateActions><Button colorScheme="purple">Home</Button><Button variant="ghost">Back</Button></EmptyStateActions></EmptyStateBody></EmptyStateContainer>
Props#
actions
actions
Type
description
description
Type
ReactNode
footer
footer
Type
ReactNode
icon
icon
Type
As<any>
spacing
spacing
Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | ... 55 more ... | "-3.5">>
title
title
Type
ReactNode
Was this helpful?