EmptyState
What fills a view that has nothing to show: nothing yet, no results, or could not load. Always offer the next step, such as creating the first item, clearing filters or trying again.
- EmptyState
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, EmptyState
No projects yet
Projects keep your files, tasks and notes together.
Could not load the projects
The server did not answer. Your work is safe.
No results for “quarterly report draft”
Check the spelling or clear the filters.
Inbox zero
Nothing needs you right now.
Dark theme, EmptyState
No projects yet
Projects keep your files, tasks and notes together.
Could not load the projects
The server did not answer. Your work is safe.
No results for “quarterly report draft”
Check the spelling or clear the filters.
Inbox zero
Nothing needs you right now.
High contrast theme, EmptyState
No projects yet
Projects keep your files, tasks and notes together.
Could not load the projects
The server did not answer. Your work is safe.
No results for “quarterly report draft”
Check the spelling or clear the filters.
Inbox zero
Nothing needs you right now.
UsageLink to the section Usage
import { EmptyState } from '@skribly/ui/feedback'<EmptyState
icon={<Inbox />}
title="No projects yet"
description="Projects keep your files and tasks together."
actions={<Button>New project</Button>}
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The title is a real heading; set headingLevel to fit the page outline.
- The icon is hidden.
- The danger tone is for failures, and its title says what failed, so the colour is never the only sign.
- Text wraps and centres at any width.
This demo runs through axe in all three themes on every test run. See what the tests check.