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#

<EmptyState
colorScheme="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

Type
ReactNode

description

Type
ReactNode

footer

Type
ReactNode

icon

Type
As<any>

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

Type
ReactNode

Was this helpful?