---
summary: 操作結果を一時的に知らせる通知
category: Feedback
---

# SnackBar

保存しました、などの操作結果を画面の右下に一時的に表示し、一定時間で自動的に消えるコンポーネントです。
ページ内に表示し続けるべき情報には Callout、操作を止めて確認を求めるときは Dialog を使ってください。

## 基本の使い方

```tsx
import { Button, SnackBar, SnackBarQueue } from 'wip-ui'

const queue = new SnackBarQueue()

<Button onPress={() => queue.add({ message: '保存しました', state: 'positive' })}>保存</Button>
<SnackBar queue={queue} />
```

## 構成要素

| 部品 | 役割 |
|---|---|
| SnackBarQueue | 表示する通知を管理するキュー。add で通知を追加する |
| SnackBar | キューの通知を表示する領域 |

## 使う場面

- 保存・送信・コピーなど、操作の結果が画面上の変化として見えないときに、結果をフィードバックする
- 詳しく読む必要のない、自動で消えても構わない簡素な内容を伝えるとき

## 使い方

### 使わない場面

- [avoid] 操作の結果が画面上のオブジェクトの変化としてそのまま見える場合は、SnackBar で重ねて知らせない
- [avoid] ユーザーが対応しないといけないエラーや、表示し続ける必要がある内容には使わない。Callout を使う

### 状態

- [should] state は結果の種類に合わせて選ぶ
  - positive：保存完了や送信成功など、操作が正常に完了したこと
  - negative：通信エラーでの保存の失敗など、操作が失敗したこと。ただし、自動で消えても困らないものに限る
  - notice：一部の処理がスキップされたなど、注意が必要な結果
  - neutral：「クリップボードにコピーしました」など、ステータスを持たない通知（アイコンなし）
- アイコンは state に応じて自動で表示され、変更はできない

### アクション

- 閉じるボタンは自動で表示される。「元に戻す」などのアクションを置くことには対応していない

## 文言

- [should] 1行に収まる短い文にする。自動で消えるまでに読み切れる量にする
- [should] 何が起きたかを、対象を含めて具体的に書く（例：「成功しました」ではなく「アイテム 1 を削除しました」）

## アクセシビリティ

- [must] 自動で消えるまでの時間を、5秒より短くしない
- [must] 色だけで結果を伝えない。メッセージの文でも結果が分かるようにする

## 実装

- [should] SnackBarQueue はコンポーネントの外で1つ作り、SnackBar はアプリ内に1つだけ置く
- state を省略すると positive になる
- 既定では 6 秒で自動的に消える。queue.add の第2引数の timeout で変えられる
- [avoid] 表示し続けるために timeout を延ばさない。Callout を使う

## Props（自動生成）

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

### SnackBar

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| queue（必須） | ToastQueue<SnackBarContent> | - | The queue of toasts to display. |
| aria-label | string | "Notifications" | An accessibility label for the toast region. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| className | ClassNameOrFunction<ToastRegionRenderProps<SnackBarContent>> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<ToastRegionRenderProps<SnackBarContent>> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |