Toastトースト
画面上に一時的に表示される短い通知メッセージです。アクションの結果やエラーメッセージなどをユーザーに伝えるために使用します。
更新 2024/11/1
バリエーション
メッセージの意味や重要度に応じて3種類を使い分けてください。Toastが消えるまでの秒数は任意に設定できます。詳しくはサンプルコードを参照してください。
- Default
- Success
- Error
import { Button, Toast, toaster } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";
export function ToastSample() {
return (
<Dl>
<Dt>Default</Dt>
<Dd>
<Button
styleType="outlined"
onClick={() =>
toaster.create({
title: "お知らせメッセージ",
duration: 1500,
})
}
>
Show Toast
</Button>
<Toast toaster={toaster} />
</Dd>
<Dt>Success</Dt>
<Dd>
<Button
styleType="outlined"
onClick={() =>
toaster.create({
type: "success",
title: "成功しました",
duration: 1500,
})
}
>
Show Toast
</Button>
<Toast toaster={toaster} />
</Dd>
<Dt>Error</Dt>
<Dd>
<Button
styleType="outlined"
onClick={() =>
toaster.create({
type: "error",
title: "エラーがあります",
duration: 1500,
})
}
>
Show Toast
</Button>
<Toast toaster={toaster} />
</Dd>
</Dl>
);
}