Home/Components/Feedback/Toast

Toast

通知トーストコンポーネント。success / warning / error バリアント。

import { Toast } from "@blueai/ui"

Examples

Variants

✓

請求書を送付しました

INV-2025-0042 を送信

支払い期限が近づいています

残り5日です

メール送信に失敗しました

送信先アドレスを確認してください

<Toast
  variant="success"
  title="請求書を送付しました"
  description="INV-2025-0042 を送信"
/>
<Toast
  variant="warning"
  title="支払い期限が近づいています"
  description="残り5日です"
/>
<Toast
  variant="error"
  title="メール送信に失敗しました"
  description="送信先アドレスを確認してください"
/>

ボタンで表示

const [toast, setToast] = useState<{ variant; title; description } | null>(null);

<FormButton onClick={() => setToast({ variant: "success", title: "保存しました" })}>
  保存する
</FormButton>

{toast && (
  <div className="fixed bottom-6 right-6 z-50 animate-slide-up">
    <Toast {...toast} onClose={() => setToast(null)} />
  </div>
)}

Props

Prop	Type	Default	Description
variant*	"success" \| "warning" \| "error"	—	トーストのスタイル
title*	string	—	タイトルテキスト
description	string	—	詳細テキスト