Empty

Projects

No projects yet

Projects group your screens and components. Create one to get started.

New project

Import from Figma

Installation

npx axiom add empty

pnpm dlx axiom add empty

yarn dlx axiom add empty

bun x axiom add empty

Colors come from empty.{neutral,error}.default.{media,icon} in the component tokens.

Usage

import { Empty } from "@/components/ui/empty";

<Empty>
	<Empty.Header>
		<Empty.Media icon="grid" />
		<Empty.Title>No projects yet</Empty.Title>
		<Empty.Description>Create one to get started.</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<Button onPress={createProject}>New project</Button>
	</Empty.Content>
</Empty>;

Props

Empty

Prop	Type	Default	Description
`children`	`ReactNode`	—	`Empty.Header` and `Empty.Content`.
`size`	`'sm' \| 'md'`	`'md'`	`md` for a full screen, `sm` for a section or a sheet: smaller media and tighter spacing.
`fill`	`boolean`	`true`	Takes the remaining height and centers its content vertically. Set to `false` inside a scroll view that already sizes it.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the container.

Empty.Media

Prop	Type	Default	Description
`icon`	`IconName`	—	Icon on a round `background.subtle` tile.
`tone`	`'neutral' \| 'error'`	`'neutral'`	`error` tints the tile with `feedback.errorSubtle`, for failures.
`children`	`ReactNode`	—	Custom media instead of `icon`: an illustration, a Lottie animation.

Empty.Title, Empty.Description

Prop	Type	Default	Description
`children`	`ReactNode`	—	Title: what is going on, in a few words. Description: why, and what the user can do about it.

Empty.Content

Prop	Type	Default	Description
`children`	`ReactNode`	—	Actions: one main Button, sometimes a secondary ghost button or a link.

Use cases

No search results

Repeat the query, suggest what to change, offer a way out.

quantum teapot

Cancel

No results for “quantum teapot”

Check the spelling or try a broader term.

Clear filters

<Empty>
	<Empty.Header>
		<Empty.Media icon="search" />
		<Empty.Title>No results for "{query}"</Empty.Title>
		<Empty.Description>
			Check the spelling or try a broader term.
		</Empty.Description>
	</Empty.Header>
	{hasFilters && (
		<Empty.Content>
			<Button size="sm" variant="outline" onPress={clearFilters}>
				Clear filters
			</Button>
		</Empty.Content>
	)}
</Empty>

Error with retry

tone="error" and a retry button. Say what failed in plain words, not the error code.

Statements

Couldn’t load statements

The server didn’t respond. Your data is safe.

Try again

if (query.isError) {
	return (
		<Empty>
			<Empty.Header>
				<Empty.Media icon="alert" tone="error" />
				<Empty.Title>Couldn't load statements</Empty.Title>
				<Empty.Description>
					The server didn't respond. Your data is safe.
				</Empty.Description>
			</Empty.Header>
			<Empty.Content>
				<Button
					size="sm"
					leadingIcon="refresh"
					loading={query.isFetching}
					onPress={() => query.refetch()}
				>
					Try again
				</Button>
			</Empty.Content>
		</Empty>
	);
}

Offline

No action to take, only information. The screen will refresh on its own when the connection comes back.

Feed

You’re offline

New posts will show up when you’re back online.

<Empty>
	<Empty.Header>
		<Empty.Media icon="wifi-off" />
		<Empty.Title>You're offline</Empty.Title>
		<Empty.Description>
			New posts will show up when you're back online.
		</Empty.Description>
	</Empty.Header>
</Empty>

Small empty section

size="sm" inside a screen that has other content.

Wallet

Balance

$1,240.18

Recent

No transactions this month

<Empty size="sm" fill={false}>
	<Empty.Header>
		<Empty.Media icon="clock" />
		<Empty.Description>No transactions this month</Empty.Description>
	</Empty.Header>
</Empty>

Async content state, for first-use and no-results empty states

Empty

On this page