Toast
Brief elevated notification for lightweight feedback. Dismisses automatically in product UIs; chrome matches Figma Toast.
Appearance
Content
Layout & behavior
Props — Toast
View MUI docs| Prop | Type | Description |
|---|---|---|
sentiment | "primary" | "pink" | "success" | "error" | "warning" | "info" | "neutral" | Semantic color theme. primary = brand chrome. |
children | ReactNode | Brief notification message. |
iconName | FaIconName | false | Leading icon. Omit for sentiment default; false hides the icon; string overrides. |
hasAction | boolean | Show outlined secondary action button. |
actionLabel | ReactNode | Action button label. |
actionStartIconName | FaIconName | Leading icon on the action button. |
actionEndIconName | FaIconName | Trailing icon on the action button. |
onAction | () => void | Action button click handler. |
isDismissible | boolean | Show dismiss control. |
onClose | () => void | Dismiss handler. |
open | boolean | Controlled visibility for the snackbar host. Omit for inline/fixture surface-only render. |
placement | "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | Viewport corner/edge when hosted (MUI Snackbar anchorOrigin). |
offset | number | Distance in px from the pinned viewport edge(s). |
surfaceOnly | boolean | Render elevated chrome without the snackbar portal. Default when open is omitted. |