Use the title prop to display a basic empty state message.
<EmptyStatetitle="No results found"/>
With Icon
Use the icon prop to display an icon above the title.
import{PersonIcon}from'@radix-ui/react-icons';
<Flexdirection="column"gap="6">
<EmptyStatetitle="No users have been created"icon={PersonIcon}></EmptyState>
</Flex>;
Sizes
Use the size prop to control the size of the empty state. Size 1 is reserved for smaller, more compact views (like a CardList), whereas Size 2 is the default used for empty tables.
import{PersonIcon}from'@radix-ui/react-icons';
<Flexdirection="column"gap="6">
<EmptyState
title="No users have been created"
icon={PersonIcon}
size="1"
></EmptyState>
<EmptyState
title="No users have been created"
icon={PersonIcon}
size="2"
></EmptyState>
</Flex>;
With Children
Use the children prop to display additional content below the title, like buttons.
import{PersonIcon}from'@radix-ui/react-icons';
<EmptyStatetitle="No users have been created"icon={PersonIcon}>