Toast
A succinct notification message that appears temporarily at the edge of the screen. Use for non-intrusive feedback like success confirmations, error alerts, and system status updates that do not require immediate user action.
Default
A basic toast notification triggered by calling
ToastService.Show() with a description string. The toast appears in the bottom-right corner by default and auto-dismisses after 5 seconds. Inject the ToastService into any component to trigger toasts from anywhere in your application.With Title
Call
ToastService.Show(description, title) with two arguments to display a toast with both a bold title and a description. The title appears in a larger font weight above the description, making it easy to scan the notification type at a glance.Destructive
Call
ToastService.Error() to display a toast with the Destructive variant, which uses a red colour scheme to indicate an error or failure. The destructive variant changes the border, background, and text colours to clearly communicate something went wrong.With Action
Pass a
ToastData object with ActionText and OnAction to add an interactive button to the toast. When the user clicks the action button, the OnAction callback fires and the toast is automatically dismissed. This is commonly used for undo operations and navigation shortcuts.Success
Call
ToastService.Success() to display a toast with the Success variant, which uses a green colour scheme and automatically shows a circle-check icon. Semantic variants include auto-icons that can be disabled via ToastData.ShowIcon = false.Info
Call
ToastService.Info() to display a toast with the Info variant, which uses a blue colour scheme and automatically shows an info icon. Use for informational messages that don't require user action.Warning
Call
ToastService.Warning() to display a toast with the Warning variant, which uses a yellow colour scheme and automatically shows a triangle-alert icon. Use for cautionary messages that need user attention but aren't errors.Compact
Set
Size to ToastSize.Compact on ToastData to reduce padding and font sizes, making the toast suitable for dialog-friendly or dense UI contexts. The compact size uses p-3 and text-xs instead of the default p-6 and text-sm.Per-Toast Position
Set the
Position property on ToastData to override the provider's default position for a specific toast. The toast renders in a separate positioned container from the main toast stack. Use this for contextual notifications that should appear near the relevant UI area.Custom Variant
Use the
Class property on ToastData to apply custom Tailwind CSS for project-specific toast styles beyond the five built-in variants (Default, Success, Info, Warning, Destructive). This pattern is useful for brand-specific status indicators or one-off notifications that don't fit the standard semantic variants.Setup
Add the ToastProvider to your main layout to enable toast notifications.
MainLayout.razor
Loading example…