SmartHR Design System

FlashMessage

FlashMessageコンポーネントは、インターフェイス上に表示されるメッセージパネルです。ユーザー操作やシステムの処理結果を、ユーザーに素早くフィードバックするために使用します。

SmartHR UIではFlashMessageです。

画面に影響を及ぼさない、画面遷移を伴わない場合のみFlashMessageを使用します。システムの処理の実行結果や、バックグラウンド処理の開始を通知する場合に適しています。

メッセージの書き方

  • 表示するメッセージが複数行になると可読性を下げるため、1行で収まる文書量で書いてください。
  • 1文のみの場合でも、文章には句点をつけます。
  • 単語のみ/体言止め（「など」で終わる場合も含む）は句点を省略します。

FlashMessageを使う際の注意

他の操作に影響を及ぼさない便利な反面、アテンションとして強くはありません。ユーザーに大きな影響を及ぼす更新の通知をしたい場合は、Dialogコンポーネントを使うことを検討してください。

種類

補足

各挙動

表示・非表示

FlashMessageは8秒表示されると自動的に非表示となります。

FlashMessageの上にカーソルを置くと、FlashMessageが消えることはありません。 カーソルがFlashMessageから離れると、FlashMessageのタイムアウトが再開されます。

表示位置

配置位置は、ウィンドウを基準とした「右上」「右下」「左上」「左下」の4パターンです。

外部サービス（ChatPlus、KARTEなど）の影響、機能ごとの画面レイアウト都合で表示位置を変えなければならない場合は、調整してください。

【閉じる】ボタン

「×（閉じる）」ボタンをクリックして手動でFlashMessageの表示を消すこともできます。

Props

NameRequiredTypeDefault ValueDescription
visibletruefalse, true
typetrue"", "success", "info", "warning", "error"
texttruestring
animation-"bounce", "fade", "none"
role-"alert", "status"
className-string
onClosetrue() => void
次へ