Toast

Toast Component

The Toast component is used to push notifications to your visitor as a lighweight and customizable alert message.

Inheritance

Toast : BootstrapComponentBase

Parameters

Name	Type	Description
AutoHide	bool	Specifies whether to automatically hide the toast. Set the Delay property to control how long the toast will be shown before automatically hidden.
BodyTemplate	RenderFragment	Allows you to completely customize the body of the toast. You can also specify any child content for the toast to specify the body.
Delay	int	The number of millseconds to show the toast before automatically hiding. Ignored if AutoHide is set to false.
Header	string	The header text of the toast.
HeaderTemplate	RenderFragment	Allows you to completely customize the header.
ShowHide	bool	Specifies whether a hide button is shown in the upper right corner of the toast that allows the user to manually hide the toast.
Subheader	string	The subheader of the toast.

Events

Name	Description
OnShow	Called when the toast is being shown, but not fully shown yet.
OnShown	Called when the toast is fully shown, including any animation delays etc.
OnHide	Called when the toast is about to be hidden, but not completely hidden yet.
OnHidden	Called when the toast has completely been hidden, including any animations or other delays.

Examples

Below are some examples on how to use the Toast component.

Auto-Hide

By default, a Toast hides automatically after 5 seconds.

@code {
    Toast toast;
}
<Toast @ref="toast" Header="Auto-Hide">This toast will automatically hide.</Toast>
<Button OnClicked="() => toast.Show()"></Button>

Manual Hiding

Set the Autohide property to false to prevent the toast from automatically hiding.

<Toast AutoHide="false">This needs to be manually hidden.</Toast>

Custom Hiding

You can also completely customize the way your toasts are hidden. The sample below provides you with a button outside the toast that you click to hide the toast.

@code {
    Toast toast;
}

<Toast @ref="toast" AutoHide="false">
    This toast is hidden by a custom action
</Toast>
<Button Color="NamedColor.Primary" IsOutline="true" OnClicked="() => toast.Hide()">Hide</Button>

Handling Events

The Toast component exposes several event callbacks that you can write code to handle.

<Toast
    OnShow="async () => { ... }"
    OnShown="async () => { ... }"
    OnHide="async () => { ... }"
    OnHidden="async () => { ... }">

    Toast with custom event handlers
</Toast>