Banner

ページやセクションの上部に表示する、閉じることができる通知コンポーネント。

いつ使うか

メンテナンス告知やシステム障害など、ページ全体に関わるグローバルな通知を表示する
新機能のリリース告知やプラン変更のお知らせなど、ユーザーに一度だけ伝えたい情報を表示する
権限不足や設定未完了など、ページの利用条件に関する注意を表示する

いつ使わないか

フォーム内のバリデーションエラーなど、特定のセクションに紐づくインライン通知には使わない。Alert を使用する
「保存しました」など一時的な通知には使わない。Toast を使用する
操作前に確認を挟む場合は使わない。Dialog を使用する

Usage

import { Banner } from '@bi-shop-it/ui/banner';

<Banner title="システムメンテナンスを予定しています" />;

システムメンテナンスを予定しています

3月20日 02:00〜06:00 の間、一部機能が利用できません。

Props

Prop	型	デフォルト	説明
`title`	`string`	—	メッセージのタイトル
`description`	`string`	—	タイトルの補足説明
`variant`	`'info' \| 'warning' \| 'destructive' \| 'success'`	`'info'`	ステータスの種類。アイコンと配色が自動で変わる
`action`	`{ label: string; onClick: () => void }`	—	アクションボタン。ラベルとクリックハンドラを指定する
`onDismiss`	`() => void`	—	指定すると閉じるボタンを表示する。クリック時のコールバック関数

バリアント

variant に応じてアイコンと配色が自動で切り替わる。

新しいバージョンが利用可能です

お使いのプランは来月で期限が切れます

システム障害が発生しています

アカウントの認証が完了しました

<Banner title="新しいバージョンが利用可能です" />
<Banner title="お使いのプランは来月で期限が切れます" variant="warning" />
<Banner title="システム障害が発生しています" variant="destructive" />
<Banner title="アカウントの認証が完了しました" variant="success" />

状態

タイトルと説明

description を指定すると、タイトルの下に補足説明を表示する。

システムメンテナンスを予定しています

3月20日 02:00〜06:00 の間、一部機能が利用できません。

<Banner
  description="3月20日 02:00〜06:00 の間、一部機能が利用できません。"
  title="システムメンテナンスを予定しています"
/>

アクションボタン付き

action を指定すると、メッセージの右側にアクションボタンを表示する。

新機能がリリースされました

<Banner
  action={{ label: '詳細を見る', onClick: () => {} }}
  title="新機能がリリースされました"
/>

閉じるボタン付き

onDismiss を指定すると、右端に閉じるボタンを表示する。

新機能がリリースされました

<Banner
  title="新機能がリリースされました"
  onDismiss={() => setIsVisible(false)}
/>

アクションボタン + 閉じるボタン

両方を組み合わせることもできる。