---
summary: ページ内に表示し続ける重要な情報・注意
category: Feedback
---

# Callout

ページ内で見落としてはいけない情報や状態を、アイコンと色を伴って表示し続けるコンポーネントです。
自動で消えても構わない操作結果の通知には SnackBar、操作を止めて確認や入力を求めるときは Dialog を使ってください。

## 基本の使い方

```tsx
import { Callout } from 'wip-ui'

<Callout color="notice">メンテナンスのため、10月30日 2:00〜4:00 はサービスを利用できません。</Callout>
```

## 使う場面

- システムの状態やエラーを、ページ内で明確に伝えるとき
- ユーザーに必要な行動を促すとき（例：設定の見直し、再試行）

## 使い方

### 色

- [should] color は伝える内容の種類に合わせて選ぶ
  - informative：操作手順の説明や仕様の補足など、参考情報
  - positive：設定完了や登録成功など、操作が正常に完了したこと
  - negative：バリデーションエラーやシステムエラーなど、問題が発生したこと
  - notice：メンテナンス予告や非推奨機能の告知など、注意喚起
  - neutral：特定のステータスを持たない補足情報や注釈
- [avoid] 重要度が低い内容に negative や notice を使わない。不要な不安を与えるため
- [avoid] 広告やサービスの紹介など、ユーザーの対応が必須でない情報に Callout を使わない
- アイコンは color に応じて自動で表示され、変更はできない

### 外観

- [should] 画面に単体で置く場合は flat、カードやダイアログの中など、限られた領域に置く場合は outline を使う

### アクション

- [should] 「詳細を見る」「再試行」など次の行動を促したいときは、Callout の中にボタンを置く
- [should] ボタンは最大2つにする。できれば1つにして、次にすべき行動をはっきりさせる

### 消し方

- [avoid] 時間の経過で自動的に消さない。消すのは、ユーザーが閉じたときか、問題が解決したときにする
- [should] 閉じるボタンは、メンテナンスのお知らせなど、ユーザーが解決できない内容に付ける
- [avoid] ユーザーが対応しないといけないエラーや、破壊的な操作の警告には、閉じるボタンを付けない

## 文言

- [should] 1〜2文で伝わる場合は、説明文だけにする
- [should] それより長くなる場合は、要点を示す短いタイトルと、詳しい説明文に分ける
- [should] 説明文には「何が起きているか」と「ユーザーが何をすべきか」を書く。要点を先に書き、補足は後ろにまわす
- [avoid] タイトルだけにしない。何をすべきかが伝わらないため
- [avoid] メッセージを省略表示しない（…で切らない）
- [avoid] ユーザーを責めるトーンで書かない（例：「入力が間違っています」ではなく「入力内容に誤りがあります」）

## アクセシビリティ

- [should] 急ぎではないお知らせには role="status"、すぐに伝える必要があるものには role="alert" を指定する
- [must] アイコンだけの閉じるボタンには、「閉じる」など機能を示すラベルを付ける
- [must] アクションは、キーボードで操作できるボタンにする

## 実装

- [should] ボタンは action に渡す。アイコンだけのボタンは、Button の iconOnly と aria-label を使う
- 閉じたときの非表示は、Callout 側では行わない。閉じるボタンが押されたら、利用側の状態で Callout を描画しないようにする
- Callout は role を自動で付けない
- [should] タイトルを付ける場合は、children の先頭に太字の Typography を置き、その後に説明文を置く。Callout の文字の大きさに合わせて、どちらも size="s" にする

```tsx
<Callout
  color="negative"
  action={
    <Button appearance="outlined" color="negative" onPress={handleRetry}>
      再試行
    </Button>
  }
>
  データを読み込めませんでした。
</Callout>

<Callout color="notice">
  <Typography size="s" fontWeight="bold">メンテナンスのお知らせ</Typography>
  <Typography size="s">10月30日 2:00〜4:00 は、管理画面を利用できません。</Typography>
</Callout>
```

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Callout

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| color | "informative" \| "neutral" \| "negative" \| "notice" \| "positive" | informative | コールアウトのセマンティックカラー |
| appearance | "flat" \| "outline" | flat | コールアウトの外観スタイル |
| action | ReactNode | - | 右側に表示するアクション要素（ボタンやアイコン） |