Mushilu-San UI Empty state
A placeholder for a list or area with no content yet, with a title, text and an action.
Selector: mui-empty
import { Empty } from '@mushilu-san/ui/data-display';Loading example…
Overview
title and description, add an icon with slot="icon", and an action button with slot="action".
role="status", so the message is announced when it appears.
When to use
A list, table or search that has no results yet. A first-run screen before the user adds anything.
When not to use
An error. Use an alert with the reason and a way to retry. Use Alert instead.
Guidelines
Do
Say what the area is for and how to fill it. Offer one clear next action.
Don't
Do not show an empty state while the content is still loading. Use a skeleton. Do not blame the user in the text.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | status | |
icon | — | aria-hidden). |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab |
Keep the title meaningful on its own, since it is the first thing a screen reader user hears.
API
Empty
| Name | Type | Default | Description |
|---|---|---|---|
title | string | undefined | — | Short heading that says what is missing. |
description | string | undefined | — | Explanation of why the area is empty and what to do next. |
CSS parts
::part(action)::part(description)::part(icon)::part(root)::part(title)
Tokens
--mui-color-text--mui-color-text-muted--mui-space-6