EmptyState

Centered, calm, never blame the user. Always tell them what could be here, and ideally how to get there.
No results found
Try adjusting your search filters.
iOS
No results found
Try adjusting your search filters.
Android
No results found
Try adjusting your search filters.
Web
tsx
<EmptyState
icon={<Icon search />}
title="No results found"
description="Try adjusting your search filters."
/>

Props

Prop
Description
icon
string | ReactElement
The glyph shown in the disc: a monochrome `<Icon />` element (cloned with the tone's tint and the disc's glyph size, so it follows `success`/default like the disc wash does; a semantic color boolean on the element still wins) or an emoji/character string.
title
string
Short, neutral headline naming the empty result.
description
string
One reassuring line, ideally pointing at the next step.
actionLabel
string
When set, renders a primary action button below the description.
onAction
() => void
Called when the action button is pressed.
success
boolean
Tone axis (pick one; default keeps the disc muted).
bordered
boolean
Container axis: wrap the column in a bordered card.
compact
boolean
Density axis (only affects the bordered card's padding).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

search

Don’t
Nothing matched
You searched for the wrong thing. Check your spelling and try again.
Blaming the searcher for an empty result set makes a normal outcome feel like a mistake.
Do
No results found
Try adjusting your search filters.
State the result neutrally and point at the lever the user can pull (filters, query).

users

Don’t
No users
There are no team members in this workspace.
A dead-end that only restates the emptiness leaves the user with nowhere to go.
Do
No users
Invite your first team member.
When the user can fix it, give them the one action that does (Invite, Create).

files

Don’t
Nothing here
This folder is empty.
Generic 'nothing here' copy never tells the user how files would get into the folder.
Do
No files
Upload or drag files here.
Name the gesture that fills the empty space so the next step is obvious.

activity

Don’t
No activity
Events will appear as they happen.
An alarming red icon turns a calm, expected empty feed into a false error.
Do
No activity
Events will appear as they happen.
Keep a routinely-empty state calm: muted icon, reassuring copy, no urgency.

notifications

Don’t
Nothing to see
You have no notifications. Sorry, it's quiet in here.
Apologetic, sad-toned copy frames an inbox-zero win as a letdown.
Do
All caught up
No new notifications.
Celebrate a cleared queue: 'All caught up' reads as success, not absence.

errors

Don’t
No errors
Nothing was found.
A grey 'nothing found' disc reads as a failed query, not as a healthy, error-free system.
Do
No errors
Everything is running smoothly.
Signal the good news with a green check: zero errors is a passing state, not an empty one.

all-clear

Don’t
No pending reviews
3 accounts are locked and waiting on you.
A green all-clear over copy that admits work is pending hides the action the user must take.
Do
All clear
No locked accounts or pending reviews.
Reserve the green all-clear for genuinely empty queues: nothing locked, nothing waiting.
← DescriptionList
Feed →