BlazorUI Demo

Alerts, toasts and notification host

Inline alerts and centrally hosted transient notifications use separate system-wide positions.

Static alerts
View code
<BuiStack Gap="2"><BuiAlert Title="Changes saved" Color="Colors.Success" StartIcon="LucideIcons.Check">The customer record is up to date.</BuiAlert><BuiAlert Title="Review required" Color="Colors.Warning" Variant="Variant.Outlined" Closeable>Two fields need attention.</BuiAlert></BuiStack>
Toast primitive

The host creates this compact component for each toast request; it may also be composed directly.

Saved successfully2
Toast visible
View code
<BuiToast Color="Colors.Success" Count="2" OnClose="DismissToast">Saved successfully</BuiToast>
<BuiText Typo="Typo.Caption">@toastState</BuiText>

@code {
    private string toastState = "Toast visible";
    private void DismissToast() => toastState = "Dismiss requested";
}
Hosted notifications

Place one BuiNotificationHost in the application layout, then use IDialogService anywhere.

View code
<BuiStack Orientation="Orientation.Horizontal" Gap="2"><BuiButton OnClick="ShowToast" Color="Colors.Success">Show toast</BuiButton><BuiButton OnClick="ShowAlert" Color="Colors.Warning">Show alert</BuiButton></BuiStack>

@code {
    private void ShowToast() => Dialogs.ShowToast("Saved successfully", new() { Color = Colors.Success });
    private void ShowAlert() => Dialogs.ShowAlert("This is a wide application alert", new() { Title = "Attention", Color = Colors.Warning });
}