Your cart is empty
Explore our products and add items to your cart
import { EmptyState, VStack } from "@chakra-ui/react"
import { LuShoppingCart } from "react-icons/lu"
const Demo = () => {
return (
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator>
<LuShoppingCart />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>Your cart is empty</EmptyState.Title>
<EmptyState.Description>
Explore our products and add items to your cart
</EmptyState.Description>
</VStack>
</EmptyState.Content>
</EmptyState.Root>
)
}
Usage
import { EmptyState } from "@chakra-ui/react"<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator />
<EmptyState.Title />
<EmptyState.Description />
</EmptyState.Content>
</EmptyState.Root>Examples
Sizes
Use the size prop to set the size of the Empty state.
Your cart is empty
Explore our products and add items to your cart
Your cart is empty
Explore our products and add items to your cart
Your cart is empty
Explore our products and add items to your cart
import { EmptyState, For, Stack, VStack } from "@chakra-ui/react"
import { LuShoppingCart } from "react-icons/lu"
const Demo = () => {
return (
<Stack>
<For each={["sm", "md", "lg"]}>
{(size) => (
<EmptyState.Root size={size} key={size}>
<EmptyState.Content>
<EmptyState.Indicator>
<LuShoppingCart />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>Your cart is empty</EmptyState.Title>
<EmptyState.Description>
Explore our products and add items to your cart
</EmptyState.Description>
</VStack>
</EmptyState.Content>
</EmptyState.Root>
)}
</For>
</Stack>
)
}
Action
Here's an example of an empty state with an action button.
Start adding tokens
Add a new design token to get started
import { Button, ButtonGroup, EmptyState, VStack } from "@chakra-ui/react"
import { HiColorSwatch } from "react-icons/hi"
const Demo = () => {
return (
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator>
<HiColorSwatch />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>Start adding tokens</EmptyState.Title>
<EmptyState.Description>
Add a new design token to get started
</EmptyState.Description>
</VStack>
<ButtonGroup>
<Button>Create token</Button>
<Button variant="outline">Import</Button>
</ButtonGroup>
</EmptyState.Content>
</EmptyState.Root>
)
}
List
Here's an example of an empty state with a list.
No results found
Try adjusting your search
- Try removing filters
- Try different keywords
import { EmptyState, List, VStack } from "@chakra-ui/react"
import { HiColorSwatch } from "react-icons/hi"
const Demo = () => {
return (
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator>
<HiColorSwatch />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>No results found</EmptyState.Title>
<EmptyState.Description>
Try adjusting your search
</EmptyState.Description>
</VStack>
<List.Root variant="marker">
<List.Item>Try removing filters</List.Item>
<List.Item>Try different keywords</List.Item>
</List.Root>
</EmptyState.Content>
</EmptyState.Root>
)
}
Closed Component
Here's how to setup the Empty State for a closed component composition.
import { EmptyState as ChakraEmptyState, VStack } from "@chakra-ui/react"
import * as React from "react"
export interface EmptyStateProps extends ChakraEmptyState.RootProps {
title: string
description?: string
icon?: React.ReactNode
}
export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
function EmptyState(props, ref) {
const { title, description, icon, children, ...rest } = props
return (
<ChakraEmptyState.Root ref={ref} {...rest}>
<ChakraEmptyState.Content>
{icon && (
<ChakraEmptyState.Indicator>{icon}</ChakraEmptyState.Indicator>
)}
{description ? (
<VStack textAlign="center">
<ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
<ChakraEmptyState.Description>
{description}
</ChakraEmptyState.Description>
</VStack>
) : (
<ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
)}
{children}
</ChakraEmptyState.Content>
</ChakraEmptyState.Root>
)
},
)
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
size | 'md' | 'md' | 'lg'The size of the component |