Feedback
Result
A block that reports the outcome of an operation. It covers seven states such as success, error, and 404, each with an icon and text so meaning stays clear without color, and it holds follow-up actions.
ReactVueWeb Components
View in Storybook Playground
Examples
<Result status="success" title="送信完了" description="メッセージを受け付けました。">
<Button status="primary">トップへ戻る</Button>
</Result>Props
| Name | Type | Default | Description |
|---|---|---|---|
status required | ResultStatus | — | Semantic status. Controls the icon and (via CSS) the icon color. |
title required | ReactNode | — | Short heading. |
description | ReactNode | — | Supporting description. |
icon | ReactNode | — | Custom icon; defaults to the built-in status glyph. |
children | ReactNode | — | Action buttons/links placed below the description. |
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.