FloatingMessage

Introduction

A floating message — sometimes called a toast or snackbar — is a short, temporary notification that pops up to give the user low-priority feedback in response to an action. It appears in a corner of the screen, stays visible for a few seconds, and disappears on its own.

Use it for confirmations and quiet status updates that don't need to interrupt the user's flow. For critical messages that require attention or action, use Message inline in the page instead.

When to use

• Floating message: Use for short, temporary feedback in response to a user action — typically a confirmation, a quiet status change, or a non-blocking warning. The user doesn't need to act on it.
• Message: Use inline on the page when the information is part of the content, needs to stay visible while the user reads or works, or requires the user to take action. Use the Message component.

Interactive demo

Try the interactive demo below to explore state and position.

Best practices

• Keep it short: A floating message should fit on one or two lines. Long text is hard to read before it disappears.
• Match the state to the meaning: Use success for confirmations, warning and alert only when the user should be aware of a problem, and the default state for neutral information.
• Don't use for critical information: Floating messages disappear on their own and may be missed. Never use them to communicate errors the user must resolve, destructive confirmations, or anything required for the task to continue.
• Avoid stacking many at once: Limit how many messages you trigger in quick succession. The default of 3 is a good ceiling for most apps.
• Don't put primary actions inside: If the user must click something, use an inline message, modal, or dialog instead. A small "I got it"-style dismiss is fine.

Position

By default, floating messages appear in the bottom right corner of the screen. They can be placed top and/or left as well.

Pick a corner that won't fight with other fixed UI on the page — for example, move messages to the top of the screen when the bottom is occupied by a BottomBar or another floating element.

Stacking

Up to 3 messages are shown at a time. When more arrive, the oldest is pushed out. Keep the stack small — a tall stack of toasts is hard to read and suggests the app is doing too much in the background.

Related