Toasts

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

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.


Basic

Blazor 
<BsToast Class="fade show">
    <BsToastHeader>
        <MyIcon />
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <BsToastCloseButton/>
    </BsToastHeader>
    <BsToastBody>
        Hello, world! This is a toast message.
    </BsToastBody>
</BsToast>

Live example

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.

Events detected by Blazor interactivity:
Blazor 
@using System.Text

<BsButton Type="BsButtonType.Button" Variant="BsButtonVariant.Primary" OnClick="() => _toast.ShowAsync()">
    Show live toast
</BsButton>

<BsToastContainer Class="@Bs.Css.PositionFixed.BottomRight">
    <BsToast @ref="_toast"
             OnShow="@(() => _sb1.AppendLine("Show"))"
             OnShown="@(() => _sb1.AppendLine("Shown"))"
             OnHide="@(() => _sb1.AppendLine("Hide"))"
             OnHidden="@(() => _sb1.AppendLine("Hidden"))">
        <BsToastHeader>
            <MyIcon />
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <BsToastCloseButton/>
        </BsToastHeader>
        <BsToastBody>
            Hello, world! This is a toast message.
        </BsToastBody>
    </BsToast>
</BsToastContainer>

<div class="mt-4">Events detected by Blazor interactivity:</div>
<div style="height: 50px; overflow-y: auto; border: 1px solid black">@_sb1</div>

@code
{
    private StringBuilder _sb1 = new();
    private BsToast _toast = default!;
}

Stacking

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

Blazor 
<BsToastContainer Position="BsToastPosition.Fixed" Placement="BsToastPlacement.BottomLeft">
    <BsToast>
        <BsToastHeader>
            <MyIcon />
            <strong class="me-auto">Bootstrap</strong>
            <small>just now</small>
            <BsToastCloseButton/>
        </BsToastHeader>
        <BsToastBody>
            See? Just like this
        </BsToastBody>
    </BsToast>
    
    <BsToast>
        <BsToastHeader>
            <MyIcon />
            <strong class="me-auto">Bootstrap</strong>
            <small>2 seconds ago</small>
            <BsToastCloseButton/>
        </BsToastHeader>
        <BsToastBody>
            Heads up, toasts will stack automatically
        </BsToastBody>
    </BsToast>
</BsToastContainer>

Custom content

Blazor 
<BsToast Class="fade show">
    <BsToastBody>
        <div class="d-flex">
            Hello, world! This is a toast message.
            <BsToastCloseButton Class="me-2 m-auto"/>
        </div>
    </BsToastBody>
</BsToast>

Alternatively, you can also add additional controls and components to toasts.

Blazor 
<BsToast Class="fade show">
    <BsToastBody>
        Hello, world! This is a toast message.
        <hr/>
        <BsButton Type="BsButtonType.Button" Variant="BsButtonVariant.Primary">Take action</BsButton>
        <BsButton Type="BsButtonType.Button" Variant="BsButtonVariant.Secondary" Dismiss="BsButtonDismiss.Toast">Close</BsButton>
    </BsToastBody>
</BsToast>

Color schemes

Blazor 
<BsToastContainer>
    <BsToast Class="@Bs.Css.TextBackgroundPrimary">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto" White/>
            </div>
        </BsToastBody>
    </BsToast>
    <BsToast Class="@Bs.Css.TextBackgroundSecondary">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto" White/>
            </div>
        </BsToastBody>
    </BsToast>
    <BsToast Class="@Bs.Css.TextBackgroundSuccess">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto" White/>
            </div>
        </BsToastBody>
    </BsToast>
    <BsToast Class="@Bs.Css.TextBackgroundDanger">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto" White/>
            </div>
        </BsToastBody>
    </BsToast>
    <BsToast Class="@Bs.Css.TextBackgroundWarning">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto"/>
            </div>
        </BsToastBody>
    </BsToast>
    <BsToast Class="@Bs.Css.TextBackgroundInfo">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto"/>
            </div>
        </BsToastBody>
    </BsToast>
    <BsToast Class="@Bs.Css.TextBackgroundLight">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto"/>
            </div>
        </BsToastBody>
    </BsToast>
    <BsToast Class="@Bs.Css.TextBackgroundDark">
        <BsToastBody>
            <div class="d-flex">
                Hello, world! This is a toast message.
                <BsToastCloseButton Class="me-2 m-auto" White/>
            </div>
        </BsToastBody>
    </BsToast>
</BsToastContainer>

Placement

Blazor 
<InputSelect @bind-Value="_placement" class="form-select">
    @foreach (var placement in Enum.GetValues(typeof(BsToastPlacement)).Cast<BsToastPlacement>())
    {
        <option value="@placement">@placement</option>
    }
</InputSelect>

<BsToastContainer Placement="_placement">
    <BsToast>
        <BsToastHeader>
            <MyIcon/>
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <BsToastCloseButton/>
        </BsToastHeader>
        <BsToastBody>
            Hello, world! This is a toast message.
        </BsToastBody>
    </BsToast>
</BsToastContainer>

@code 
{
    private BsToastPlacement _placement = BsToastPlacement.TopLeft;
}

Toast Service - Standalone

Blazor 
@inject  IToastService ToastService

<div class="d-flex flex-wrap" style="gap: 10px;">
    <BsButton Variant="BsButtonVariant.Primary" Type="BsButtonType.Button"
              OnClick="@(() => ToastService.ShowAsync("Hi, I am a toast body"))">
        Show simple standalone Toast
    </BsButton>

    <BsButton Variant="BsButtonVariant.Primary" Type="BsButtonType.Button"
              OnClick="@(() => ToastService.ShowAsync("Hi, I am a toast body", "Hi, I am a toast header"))">
        Show standalone Toast with title
    </BsButton>

    <BsButton Variant="BsButtonVariant.Primary" Type="BsButtonType.Button"
              OnClick="@(() => ToastService.ShowAsync("Hi, I am a toast body", "Hi, I am a toast header", _options))">
        Show standalone Toast with title and options
    </BsButton>

    <BsButton Variant="BsButtonVariant.Primary" Type="BsButtonType.Button" OnClick="ShowToastAsync">
        Show simple standalone toast + ToastReference
    </BsButton>
</div>

@code 
{
    private ToastOptions _options = new ()
    {
        Class = Bs.Css.TextBackgroundPrimary,
        Delay = 4000
    };
    
    private async Task ShowToastAsync()
    {
        var options = new ToastOptions
        {
            Color = BsToastColor.Secondary,
            Delay = 30000
        };
        
        var toastRef = await ToastService.ShowAsync("Notification in progress...", options: options);
        
        await toastRef.WaitClosedAsync();

        await ToastService.ShowAsync("Notification completed!");
    }
}

Toast Service - RenderFragment

Blazor 
@inject  IToastService ToastService

<div class="d-flex flex-wrap" style="gap: 10px;">
    <BsButton Variant="BsButtonVariant.Primary" Type="BsButtonType.Button" OnClick="ShowToastAsync">
        Show toast
    </BsButton>
</div>

@code 
{
    private async Task ShowToastAsync()
    {
        await ToastService.ShowAsync(@<BsToastBody>Hi, I am a toast body</BsToastBody>);
    }
}