The Toast component displays brief, auto-dismissing notifications. Use toasts for success confirmations, error alerts, or informational messages that don't require user action.

Installation

shellui add toast

Basic Usage

<Button OnClick="() => showToast = true">Show Toast</Button>

<Toast IsVisible="@showToast" IsVisibleChanged="@((v) => showToast = v)"
       Title="Success"
       Description="Your changes have been saved.">
</Toast>

@code {
    private bool showToast = false;
}

Variants

Default

<Toast IsVisible="@show" IsVisibleChanged="@((v) => show = v)"
       Variant="default"
       Title="Notification"
       Description="You have a new message." />

Destructive

<Toast IsVisible="@show" IsVisibleChanged="@((v) => show = v)"
       Variant="destructive"
       Title="Error"
       Description="Something went wrong. Please try again." />

Success

<Toast IsVisible="@show" IsVisibleChanged="@((v) => show = v)"
       Variant="success"
       Title="Saved"
       Description="Your profile has been updated successfully." />

Position

Control where toasts appear on screen:

<Toast IsVisible="@show" IsVisibleChanged="@((v) => show = v)"
       Position="top-right"
       Title="Top Right"
       Description="Toast appears in the top right." />

<Toast IsVisible="@show2" IsVisibleChanged="@((v) => show2 = v)"
       Position="bottom-left"
       Title="Bottom Left"
       Description="Toast appears in the bottom left." />

With Custom Content

<Toast IsVisible="@show" IsVisibleChanged="@((v) => show = v)" Title="New Update">
  <div class="flex items-center gap-2">
    <p class="text-sm">Version 2.0 is now available.</p>
    <Button Size="ButtonSize.Sm" OnClick="HandleUpdate">Update</Button>
  </div>
</Toast>

@code {
    private bool show = false;
    private void HandleUpdate() { show = false; }
}

Multiple Toasts

Stack multiple toasts with a service pattern:

<Button OnClick="ShowSuccess">Success</Button>
<Button OnClick="ShowError">Error</Button>

<Toast IsVisible="@successVisible" IsVisibleChanged="@((v) => successVisible = v)"
       Variant="success" Title="Done!" Description="Operation completed." />

<Toast IsVisible="@errorVisible" IsVisibleChanged="@((v) => errorVisible = v)"
       Variant="destructive" Title="Failed" Description="Operation failed." />

@code {
    private bool successVisible = false;
    private bool errorVisible = false;

    private void ShowSuccess() => successVisible = true;
    private void ShowError() => errorVisible = true;
}

API Reference

Property	Type	Default	Description
`IsVisible`	`bool`	`false`	Controls toast visibility
`IsVisibleChanged`	`EventCallback<bool>`	—	Callback when visibility changes
`Title`	`string?`	`null`	Toast title
`Description`	`string?`	`null`	Toast description text
`Variant`	`string`	`"default"`	Visual style: `default`, `destructive`, `success`
`Position`	`string`	`"bottom-right"`	Screen position: `top-left`, `top-right`, `bottom-left`, `bottom-right`
`ChildContent`	`RenderFragment`	`null`	Custom content
`Class`	`string?`	`null`	Additional CSS classes

Accessibility

The Toast component includes:

role="status" with aria-live="polite" for screen readers
Close button with aria-label
Auto-dismiss with configurable duration
Keyboard dismissible via close button
Respects prefers-reduced-motion

Toast

On this page