Empty states provide user guidance when there's no data to show, handling scenarios like zero results, missing permissions, or upcoming features. Use <base-empty-state> for container placeholders and <base-coming-soon> for page-level future features.
A standard placeholder for empty data views with an icon, text, and call-to-action.
Get started by creating a new project. You can add files and invite team members later.
Useful when filtering or searching lists results in no hits.
We couldn't find anything matching your search criteria. Try different keywords.
For full-page or section placeholders for upcoming features, use the dedicated <base-coming-soon> component.
Our team is working hard to bring you this new feature. Stay tuned.
Run the following command to add this component to your project:
npx base-ui-cli add empty-state
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add empty-state
// Paths are relative to aliases.components (default: src/app/components)
import { EmptyStateComponent } from './empty-state/empty-state.component';
@Component({
selector: 'app-your-component',
imports: [
EmptyStateComponent
],
template: `...`
})
export class YourComponent {} API for empty-state — generated from JSDoc in the library source.
| API | Member | Type | Description |
|---|---|---|---|
base-empty-state | iconName | string | The name of the SVG icon to display at the top. |
base-empty-state | title | string | The primary heading text. |
base-empty-state | description | string | The secondary body text explaining the empty state. |
Content