Behavior comparison
Inline alert vs Toast
Decisive difference
Inline alert stays displayed beside the content it explains; Toast appears detached from its source and may disappear on its own.
Choice criteria, links and sources
- Inline alertChoose Inline alert if the message must stay visible until the problem is resolved, such as a form error.Open entry Inline alert
- ToastChoose Toast if you confirm a low-risk result the user can ignore without consequence.Open entry Toast
See the nine dimensionsSee the sources
Inform the user
Try it
Is the message transient, persistent in context, or global to the page?
Inline alert
Shared trial context
A workspace reports a state change and must place the message according to its scope, urgency, and persistence.
Inline alert
Mission
Inline alert
Trigger the failure, read the reason, use the recovery action, and verify the message stays until a valid file is chosen.
Maximum size: 1 MB.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The visible alert names the failed file, explains the size limit, and offers Choose another file.
- Edge case
- If the error is already in the focused upload region, it is not redundantly announced as an assertive alert.
Toast
Mission
Toast
Copy the link, hear or read the confirmation, focus Dismiss, and verify the timer pauses.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The message Link copied appears without moving focus away from the copy button.
- Edge case
- Queued messages remain individually readable, and an available action is never covered by another toast.
What this example shows
Inline alert stays beside the affected content; Toast is transient and detached, while Banner addresses a broad page-level condition.
Which fits your need?
Inline alert
Explaining a form or upload failure in context
Toast
Confirming a low-risk background result
Difference and sources
Inline alert stays beside the affected content; Toast is transient and detached, while Banner addresses a broad page-level condition.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Surface
The visible container that holds the concept's content.
Decision
Family question
Is the message transient, persistent in context, or global to the page?
Three criteria to choose
- Use case
Inline alert
Explaining a form or upload failure in context
Toast
Confirming a low-risk background result
- Placement
Inline alert
Inside the related form or content section, close to the source of the issue.
Toast
Overlays a viewport edge without moving the page layout.
- Dismissal
Inline alert
It remains until the condition resolves; a close control exists only when hiding the message cannot conceal an unresolved risk.
Toast
It expires after sufficient time, pauses for interaction, and can be dismissed explicitly without requiring action.
Nine dimensions
- Trigger
Inline alert
A validation or system condition relevant to a specific section creates the message.
Toast
A system event or completed user action creates the message; users do not open it as a destination.
- Modality
Inline alert
Non-modal, persistent message within the affected context.
Toast
Non-modal, transient status message that does not take focus.
- Placement
Inline alert
Inside the related form or content section, close to the source of the issue.
Toast
Overlays a viewport edge without moving the page layout.
- Interactivity
Inline alert
May include recovery links or actions and remains available until resolved or explicitly dismissed.
Toast
May offer one limited undo or dismiss action; never holds an essential decision.
- Focus
Inline alert
The message does not steal focus on routine updates; failed submission may focus a summary or first invalid control deliberately.
Toast
The toast never steals focus on arrival; an optional action becomes reachable without disrupting the current task.
- Dismissal
Inline alert
It remains until the condition resolves; a close control exists only when hiding the message cannot conceal an unresolved risk.
Toast
It expires after sufficient time, pauses for interaction, and can be dismissed explicitly without requiring action.
- Accessible role
Inline alert
status | alert | none
Toast
status
- Use case
Inline alert
Explaining a form or upload failure in context
Toast
Confirming a low-risk background result
- Mobile behavior
Inline alert
Use the container width near the affected content instead of floating over it.
Toast
Stay clear of system chrome, safe areas, and the keyboard; keep copy and actions brief.
| Dimension | Inline alertInline alert | ToastToast |
|---|---|---|
| Trigger | A validation or system condition relevant to a specific section creates the message. | A system event or completed user action creates the message; users do not open it as a destination. |
| Modality | Non-modal, persistent message within the affected context. | Non-modal, transient status message that does not take focus. |
| Placement | Inside the related form or content section, close to the source of the issue. | Overlays a viewport edge without moving the page layout. |
| Interactivity | May include recovery links or actions and remains available until resolved or explicitly dismissed. | May offer one limited undo or dismiss action; never holds an essential decision. |
| Focus | The message does not steal focus on routine updates; failed submission may focus a summary or first invalid control deliberately. | The toast never steals focus on arrival; an optional action becomes reachable without disrupting the current task. |
| Dismissal | It remains until the condition resolves; a close control exists only when hiding the message cannot conceal an unresolved risk. | It expires after sufficient time, pauses for interaction, and can be dismissed explicitly without requiring action. |
| Accessible role | status | alert | none | status |
| Use case | Explaining a form or upload failure in context | Confirming a low-risk background result |
| Mobile behavior | Use the container width near the affected content instead of floating over it. | Stay clear of system chrome, safe areas, and the keyboard; keep copy and actions brief. |