Components

EmptyState

Heading, description and actions for when a screen cannot show its usual content

Overview

EmptyState tells people what happened and what to do next when a screen cannot show its usual content.

One block for four cases — nothing added yet, nothing in the chosen range, failed to load, page not found
Title → Description → Actions — say what happened, then why or how to fix it, then offer at most one primary button
Two sizes — medium sits inside a page below its title; large is the whole page, such as a 404

Add what you plan to do, or log something you’ve completed.

Add role="alert" so screen readers read it out when it appears.

Something went wrong while loading. Please try again.

The page you’re looking for doesn’t exist or has moved.

Prop	Type	Default	Required	Description
`size`	`'medium' \| 'large'`	'medium'	No	medium sits inside a page below its title (top space 96). large fills a whole page, such as 404 or a crash
`align`	`'center' \| 'start'`	'center'	No	start lines the block up with page content, such as a docs page
`children`	`ReactNode`	-	Yes	EmptyState.Title, EmptyState.Description and EmptyState.Actions

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Title text
`as`	`'h1' \| 'h2' \| 'h3' \| 'p'`	'h2'	No	Heading level. Use h1 when the block is the whole page

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Description text

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Buttons or links

상태	요소	속성	값
enabled	root	`gap`	`$size.space.200`
enabled	title	`color`	`$color.text.default.default`
enabled	description	`color`	`$color.text.default.secondary`
enabled	description	`typography`	`$text.bodyBase`
enabled	actions	`gap`	`$size.space.400`
enabled	actions	`marginTop`	`$size.space.200`

상태	요소	속성	값
enabled	root	`paddingTop`	`$size.space.2400`
enabled	title	`typography`	`$text.bodyStrong`

상태	요소	속성	값
enabled	title	`typography`	`$text.subtitle`

상태	요소	속성	값
enabled	root	`textAlign`	`center`토큰 아님 — alignment is not tokenized

상태	요소	속성	값
enabled	root	`textAlign`	`start`토큰 아님 — alignment is not tokenized

Keep the page title and navigation on screen. Replace only the content area.
Inside a page, use a secondary button so it does not compete with the page's primary button.
When nothing is found in a chosen range, a one-line description is enough: "No logs this week". The controls to change the range are already on the page.
Never show internal error messages. Map them to a short, human sentence.
While data loads, use Skeleton instead.