Empty
What a list or a page shows when it has nothing to show, with the reason and the way forward.
An empty state takes the place of content that is not there: a list without records yet, a search without results, a folder without files. It says why, and offers the next step. It is not a loading state: while data loads, show a spinner or a loading screen, and the empty state only once you know there is nothing.
// apps/docs/examples/ui/empty.tsx'use client';
import {useState} from 'react';import {FolderOpenIcon, SearchXIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle,} from '@workspace/active-ui/components/primitives/empty';
/** * What a list shows when it has nothing to show, and why: no records yet, * with the action that creates the first; and no results for a search, with * the way back. An empty state is no loading state. */export default function EmptyExample() { const [query, setQuery] = useState('rotterdam'); return ( <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2"> <Empty className="border"> <EmptyHeader> <EmptyMedia variant="icon"> <FolderOpenIcon aria-hidden /> </EmptyMedia> <EmptyTitle>No schemes yet</EmptyTitle> <EmptyDescription> Create a scheme to add participants and send statements. </EmptyDescription> </EmptyHeader> <EmptyContent> <Button>Create a scheme</Button> </EmptyContent> </Empty> <Empty className="border"> <EmptyHeader> <EmptyMedia variant="icon"> <SearchXIcon aria-hidden /> </EmptyMedia> <EmptyTitle> {query ? `Nothing matches “${query}”` : 'Search cleared'} </EmptyTitle> <EmptyDescription> Check the spelling, or search for a participant number instead. </EmptyDescription> </EmptyHeader> <EmptyContent> <Button variant="outline" disabled={!query} onClick={() => setQuery('')} > Clear the search </Button> </EmptyContent> </Empty> </div> );}Usage#
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle,} from '@workspace/active-ui/components/primitives/empty';
<Empty> <EmptyHeader> <EmptyMedia variant="icon"> <FolderOpenIcon aria-hidden /> </EmptyMedia> <EmptyTitle>No schemes yet</EmptyTitle> <EmptyDescription>Create a scheme to add participants.</EmptyDescription> </EmptyHeader> <EmptyContent> <Button>Create a scheme</Button> </EmptyContent></Empty>;Anatomy#
Empty: the centred area; give it aborderto frame it.EmptywithHeader Empty(Media variant:default, oriconfor an icon on a muted tile),EmptyandTitle Empty(links in it are underlined).Description Empty: the actions.Content
What your application provides#
The reason, specific to the situation: "No schemes yet" differs from "Nothing matches rotterdam", and from "You have no access".
The next step, if there is one, as an action.
The moment: show the empty state only after loading has finished without results.
Accessibility#
An empty state is ordinary content. When it replaces a list after a search, announce the change, for example with a polite live region near the search field, because a reader who typed does not see the list change.
API#
EmptyMedia
Props
- Type
"default""icon"null- Default
'default'
default as is, or icon for an icon on a muted tile.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Parts that take only their element’s attributes
Empty: the attributes of a<div>, with className and ref.Empty: the attributes of aHeader <div>, with className and ref.Empty: the attributes of aTitle <div>, with className and ref.Empty: the attributes of aDescription <p>, with className and ref.Empty: the attributes of aContent <div>, with className and ref.
This page adapts the Empty documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.