Flowbite Blazor

Blazor Toast Component Examples

Show alert messages to your users using the toast component. Get started with the examples below.

Default Toast #

This is the default toast component. Use the IToastService to display toasts.

<Button OnClick="@(() => ToastService.Show("Hi there 👋!"))">Show Default Toast</Button>

Toast Types #

Use the `type` parameter in the `Show` method to change the appearance based on the context (e.g., success, error, warning, info).

<div class="flex flex-wrap gap-2">
    <Button OnClick="@(() => ToastService.ShowSuccess("Item successfully created."))">Show Success Toast</Button>
    <Button OnClick="@(() => ToastService.ShowError("Something went wrong!"))">Show Error Toast</Button>
    <Button OnClick="@(() => ToastService.ShowWarning("Warning: Low disk space."))">Show Warning Toast</Button>
    <Button OnClick="@(() => ToastService.ShowInfo("New version available."))">Show Info Toast</Button>
</div>

Toast with HTML #

You can include HTML markup within the toast message.

<Button OnClick="@ShowHtmlToast">Show HTML Toast</Button>

@code {
    private void ShowHtmlToast()
    {
        ToastService.Show("User <strong>John Doe</strong> logged in. <a href=\"#\" class=\"underline\">View details</a>");
    }
}

Toast Positioning #

Use the `Position` parameter on the `<ToastHost />` component to control where toasts appear on the screen. The example below includes a dedicated host to demonstrate the effect.

<div class="relative">
    <ToastHost Position="@currentPosition" />
</div>

<div class="flex flex-wrap gap-2">
    <Button OnClick="@(() => SetPosition(ToastPosition.TopLeft))">Top Left</Button>
    <Button OnClick="@(() => SetPosition(ToastPosition.TopCenter))">Top Center</Button>
    <Button OnClick="@(() => SetPosition(ToastPosition.TopRight))">Top Right</Button>
    <Button OnClick="@(() => SetPosition(ToastPosition.BottomLeft))">Bottom Left</Button>
    <Button OnClick="@(() => SetPosition(ToastPosition.BottomCenter))">Bottom Center</Button>
    <Button OnClick="@(() => SetPosition(ToastPosition.BottomRight))">Bottom Right</Button>
</div>

@code {
    private ToastPosition currentPosition = ToastPosition.TopRight;

    private void SetPosition(ToastPosition newPosition)
    {
        currentPosition = newPosition;
        ToastService.Show($"Position set to {newPosition}");
    }
}