Home/Components/Feedback/Snackbar

Snackbar

画面下部に表示される一時的な通知。SnackbarProvider でラップし、useSnackbar() で表示。

import { SnackbarProvider, useSnackbar } from "@blueai/ui"

Examples

Click to Show

const snackbar = useSnackbar();

<FormButton onClick={() => snackbar.show("保存しました", "success")}>
  Success
</FormButton>
<FormButton onClick={() => snackbar.show("お知らせがあります", "info")}>
  Info
</FormButton>
<FormButton onClick={() => snackbar.show("エラーが発生しました", "error")}>
  Error
</FormButton>

Props

Prop	Type	Default	Description
message*	string	—	通知テキスト (show 引数)
variant	"success" \| "error" \| "info"	"success"	通知スタイル (show 引数)