Notification Button
着信通知パネルを開くためのフローティングボタン。通常はアイコン + 未読バッジ、着信中は電話相手の名前を伴うラベル付きピルに切り替わる。カイクラの CTI ワークフローにおける「今この瞬間の着信」を目立たせる中核コンポーネント。
プレビュー
左から「通常 (バッジなし)」「未読 3 件」「着信中」の代表的な 3 パターン。
種類
表示形態は 2 種類。
variant prop で切り替える。Circle
40 × 40 の丸型。オペレーターが常時目にする「通知の入り口」。バッジで未読件数を伝える。
Incoming
着信中を示すラベル付きピル。ボタンが自動で拡張し、シェイクアニメーションで注意を引く。
label に相手の名前や電話番号を渡す。状態
Normal / Hover / Pressed の 3 状態。Hover と Pressed はカーソルを乗せて確認できる。
Circle
Incoming
実装例
import { NotificationButton } from "@/components/NotificationButton";
export function Example() {
return (
<div className="flex items-center gap-4">
{/* 通常時 (バッジなし) */}
<NotificationButton variant="circle" aria-label="着信通知パネルを開く" />
{/* 未読あり */}
<NotificationButton variant="circle" badgeCount={3} aria-label="着信通知パネルを開く" />
{/* 着信中 (ラベル + シェイクアニメーション) */}
<NotificationButton variant="incoming" label="山田 太郎" aria-label="着信通知パネルを開く" />
</div>
);
}利用基準
使うべき時
- 着信通知パネル (Call Popup) の開閉トリガーとして使用
- 画面右上や検索バー付近など、視線が届きやすい位置に固定配置
- 着信中は必ず incoming variant に切り替え、相手名または番号を label に渡す
- アイコンのみで意味を伝えるため aria-label を必須で指定
使わない時
- ページ内の一般的な通知一覧 (お知らせ) のトリガー → Popover を使用
- アプリ全体で複数配置する (どれが「今の着信」か曖昧になる)
- 着信中でないのに incoming variant を使う (シェイクが無意味になる)
- バッジに 3 桁以上の数字を直接入れる (99+ で丸められる)
仕様
- primitive:
src/components/NotificationButton.tsx - variant:
circle(既定) /incoming - サイズ: 高さ 40px 固定。circle は 40 × 40、incoming は最大 260px まで拡張
- バッジ:
badgeCount{>0} 時のみ表示。100 以上は「99+」に丸める。incoming 時は非表示 - アニメーション: incoming variant は 2 秒周期の水平シェイク。
prefers-reduced-motionが有効なら停止 - Shadow:
--shadow-layer-2(常時)