Component

BOBToast

Transient notifications shown via IToastService. Six positions, configurable duration, animations, custom content.

API reference ↗

Basic usage

RAZOR
<BOBButton Text="Show toast" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Hello from a toast!"])))" />

Positions

RAZOR
<BOBButton Text="Top Left" Size="BOBSize.Small" OnClick="@(() => ShowAt(ToastPosition.TopLeft))" />
<BOBButton Text="Top Center" Size="BOBSize.Small" OnClick="@(() => ShowAt(ToastPosition.TopCenter))" />
<BOBButton Text="Top Right" Size="BOBSize.Small" OnClick="@(() => ShowAt(ToastPosition.TopRight))" />
<BOBButton Text="Bottom Left" Size="BOBSize.Small" OnClick="@(() => ShowAt(ToastPosition.BottomLeft))" />
<BOBButton Text="Bottom Center" Size="BOBSize.Small" OnClick="@(() => ShowAt(ToastPosition.BottomCenter))" />
<BOBButton Text="Bottom Right" Size="BOBSize.Small" OnClick="@(() => ShowAt(ToastPosition.BottomRight))" />

Durations

RAZOR
<BOBButton Text="Quick (2s)" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Quick (2s)"]), ToastOptions.Quick))" />
<BOBButton Text="Default (4s)" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Default (4s)"]), ToastOptions.Default))" />
<BOBButton Text="Long (8s)" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Long (8s)"]), ToastOptions.Long))" />

Persistent + closable

RAZOR
<BOBButton Text="Persistent (no dismiss)" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Stays until closed."]), ToastOptions.Persistent))" />
<BOBButton Text="Not closable" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["No X button — wait it out."]), new ToastOptions { Closable = false }))" />

Animations

RAZOR
<BOBButton Text="Slide & Fade" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Slide & Fade"]), new ToastOptions { Animation = ToastAnimation.SlideAndFade }))" />
<BOBButton Text="Slide only" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Slide only"]), new ToastOptions { Animation = ToastAnimation.SlideOnly }))" />
<BOBButton Text="Fade only" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Fade only"]), new ToastOptions { Animation = ToastAnimation.FadeOnly }))" />
<BOBButton Text="None" OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["No animation"]), new ToastOptions { Animation = ToastAnimation.None }))" />

Typed helpers

Add toast-info / toast-success / toast-warning / toast-error CSS rules in your app, then pass CssClass.

RAZOR
<BOBButton Text="Info" BackgroundColor="@PaletteColor.Info" Color="@PaletteColor.InfoContrast"
           OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Info toast"]), new ToastOptions { CssClass = "toast-info" }))" />
<BOBButton Text="Success" BackgroundColor="@PaletteColor.Success" Color="@PaletteColor.SuccessContrast"
           OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Success!"]), new ToastOptions { CssClass = "toast-success" }))" />
<BOBButton Text="Warning" BackgroundColor="@PaletteColor.Warning" Color="@PaletteColor.WarningContrast"
           OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Watch out."]), new ToastOptions { CssClass = "toast-warning" }))" />
<BOBButton Text="Error" BackgroundColor="@PaletteColor.Error" Color="@PaletteColor.ErrorContrast"
           OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Something broke."]), new ToastOptions { CssClass = "toast-error" }))" />

Manage

RAZOR
<BOBButton Text="Show 3 toasts" OnClick="@ShowThree" />
<BOBButton Text="Close all"
           BackgroundColor="@PaletteColor.Error"
           Color="@PaletteColor.ErrorContrast"
           OnClick="@(() => Toast.CloseAllAsync())" />
<BOBButton Text="@($"{Loc["Clicks"]}: {_clicks}")" OnClick="@ShowClickable" />

Elevation

Material Design elevation level (0–24). Derives shadow and dark-mode surface tint automatically.

RAZOR
<BOBButton Text="Toast Elevation 2"
           OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["Low elevation toast"]), new ToastOptions { Elevation = 2 }))" />
<BOBButton Text="Toast Elevation 6"
           OnClick="@(() => Toast.ShowAsync(b => b.AddContent(0, Loc["High elevation toast"]), new ToastOptions { Elevation = 6 }))" />

Properties

BOBToast

3 rows.
PropertyTypeDefaultDescription
StateToastStatedefault!Toast state (id, content, options, lifecycle flags) supplied by .
OnCloseAnimationCompleteEventCallback<Guid>Raised after the close animation finishes so the host can remove the toast from the active list.
Elevationint?Material Design elevation level (0–24) applied to the toast surface. Sets a derived /// shadow and lifts the surface in dark mode via a tint overlay. (default) /// keeps the component-default shadow defined in CSS.

BOBToastHost

1 row.
PropertyTypeDefaultDescription
MaxVisiblePerPositionint5Maximum number of toasts rendered simultaneously per position. Excess toasts queue and surface as older ones close.