Empty State

A placeholder for an empty list, search or page, with the action that fills it.

Stable

Web

iOS

Android

@advui/core

Source

Basic

Preview

Code

No projects yet

Projects keep your files and team in one place.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Button, EmptyState } from '@advui/core'
import { MailIcon } from '@advui/icons'

<EmptyState
  icon={<MailIcon />}
  title="No messages"
  description="New messages will show up here."
>
  <Button>Compose</Button>
</EmptyState>

Examples

No search results

Preview

Code

No results for “invoice 2024”

Check the spelling or try a shorter search.

API reference

EmptyState

Prop	Type	Default	Description
`title`	`ReactNode`	—	Short heading.
`description`	`ReactNode`	—	One or two sentences.
`icon`	`ReactNode`	—	Icon in a circle above the title.
`children`	`ReactNode`	—	Actions, usually Buttons.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Heading level of the title.
`bordered`	`boolean`	`false`	Dashed border, for empty areas inside a page.
`tone`	`'default' \| 'error'`	`'default'`	Colors of the icon circle.

Accessibility

The title is a heading (h3 by default), so screen-reader users can find it; set headingLevel to fit the page outline.
The icon is decorative and hidden from assistive technology.

Since v0.4.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousConfirm Dialog

NextError State