Feedback
Empty State
A placeholder for an empty list, no search results, or an error. It centers an icon, heading, text, and an action.
ReactVueWeb Components
View in Storybook Playground
Examples
<EmptyState icon={<InboxIcon />} title="まだ何もありません" description="最初の項目を追加しましょう。"
actions={<Button>追加</Button>} />Props
| Name | Type | Default | Description |
|---|---|---|---|
title required | ReactNode | — | Short heading. |
description | ReactNode | — | Supporting description. |
icon | ReactNode | — | Decorative icon/illustration. |
actions | ReactNode | — | Action buttons/links. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.