Blazorise Toast component

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Toasts are brief alerts made to resemble push notifications, which are more common on desktop and mobile devices. Since they are flexbox-built, they are simple to align and reposition.

Overview

Things to know when using the toast component:

• Toasts are opt-in for performance reasons, so you must initialize them yourself.

• Toasts will automatically hide if you do not specify Autohide="false".

• Toasts must be wrapped with a <Toaster> component to be properly placed on a screen.

• Use the toast service provider to show toasts programmatically with minimal code.

Examples

<Div Position="Position.Relative" Width="Width.Is100" Height="Height.Rem(20)">
    <Toaster PlacementStrategy="ToasterPlacementStrategy.Absolute">
        <Toast Visible Autohide="false">
            <ToastHeader>
                <Strong Margin="Margin.IsAuto.FromEnd">Blazorise</Strong>
                <Small>11 mins ago</Small>
                <CloseButton />
            </ToastHeader>
            <ToastBody>
                Hello, world! This is a toast message.
            </ToastBody>
        </Toast>
    </Toaster>
</Div>

<Button Color="Color.Primary" Clicked="@(() => toastVisible = true)">
    Show live toast
</Button>

<Toaster>
    <Toast @bind-Visible="@toastVisible">
        <ToastHeader>
            <Strong Margin="Margin.IsAuto.FromEnd">Blazorise</Strong>
            <Small>11 mins ago</Small>
            <CloseButton />
        </ToastHeader>
        <ToastBody>
            Hello, world! This is a toast message.
        </ToastBody>
    </Toast>
</Toaster>

@code {
    bool toastVisible = false;
}

<Div Position="Position.Relative" Width="Width.Is100" Height="Height.Rem(20)">
    @ToastRenderFragment( ToasterPlacement.TopStart )

    @ToastRenderFragment( ToasterPlacement.TopEnd )

    @ToastRenderFragment( ToasterPlacement.BottomStart )

    @ToastRenderFragment( ToasterPlacement.BottomEnd )
</Div>

@code {
    private RenderFragment ToastRenderFragment( ToasterPlacement placement ) => __builder =>
    {
        <Toaster Placement="@placement" PlacementStrategy="ToasterPlacementStrategy.Absolute">
            <Toast Visible Autohide="false">
                <ToastHeader>
                    <Strong Margin="Margin.IsAuto.FromEnd">Blazorise</Strong>
                    <Small>11 mins ago</Small>
                    <CloseButton />
                </ToastHeader>
                <ToastBody>
                    Hello, world! This is a toast message.
                </ToastBody>
            </Toast>
        </Toaster>
    };
}

Best Practices

Use Sparingly

Notifications are disruptive by design and should be used sparingly. Use fewer notifications by reserving them for more important information that may otherwise go unnoticed by the user.

Less urgent notifications can be provided through a link or drop-down in the application header or footer, instead of immediate notifications.

Limit Content Length

Aim for one or two lines of content. Notifications should be brief and to the point. More information can be provided through an embedded link or Button.

Toast Positions

Toasts can be dispatched to all four corners of a page. We do not recommend to use more than one position for toasts in an application because that could be disorienting for users. Pick one desired position and configure it in the Toaster.

API

Attributes

Toaster

Toast