https://github.com/lumexui/blazor-sonner
An opinionated toast component for Blazor. A port of @emilkowalski's Sonner.
https://github.com/lumexui/blazor-sonner
blazor notifications sonner toast
Last synced: 4 months ago
JSON representation
An opinionated toast component for Blazor. A port of @emilkowalski's Sonner.
- Host: GitHub
- URL: https://github.com/lumexui/blazor-sonner
- Owner: LumexUI
- License: mit
- Created: 2025-08-27T15:59:07.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2026-01-27T20:57:50.000Z (5 months ago)
- Last Synced: 2026-01-28T07:42:12.603Z (5 months ago)
- Topics: blazor, notifications, sonner, toast
- Language: CSS
- Homepage: https://sonner.lumexui.org
- Size: 1.15 MB
- Stars: 18
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
https://github.com/user-attachments/assets/dc14fa06-aeae-422f-aa8a-b3be1ca540c4
# Sonner for Blazor
An opinionated toast component for Blazor. A port of Emil Kowalski's [Sonner](https://sonner.emilkowal.ski/).
## Installation
```bash
dotnet add package Blazor.Sonner
```
Register the service in the DI container.
```csharp
using Blazor.Sonner.Extensions;
// ...
builder.Services.AddSonner();
```
Add the styles to the HTML.
```html
```
## Usage
Render the toaster in the root of your app.
```razor
@using Blazor.Sonner
@inject ToastService Toast
Toast.Show("My first toast"))">
Give me a toast
```
## API Reference _(in progress)_
### ToastService
| Method | Description |
| ------------- | -------------- |
| Show | Displays a default toast with the specified title and optional data. |
| Success | Displays a success toast with the specified title and optional data. |
| Warning | Displays a warning toast with the specified title and optional data. |
| Error | Displays an error toast with the specified title and optional data. |
| Info | Displays an informational toast with the specified title and optional data. |
| Async | Displays a toast linked to an asynchronous operation, updating automatically based on its state and result. |
| RemoveAll | Removes all currently displayed toasts. |
### Toaster (Global settings)
| Parameter | Description | Type | Default |
| ------------- | -------------- | ------------- | ------------- |
| Id | Gets or sets the unique identifier for the toaster instance. | `string?` | `-` |
| Position | Gets or sets the position on the screen where toasts are displayed. | `ToastPosition` | `ToastPosition.BottomRight` |
| Duration | Gets or sets the duration each toast is displayed before it is automatically dismissed. | `TimeSpan` | `4000` ms |
| VisibleToasts | Gets or sets the maximum number of visible toasts. | `int` | `3` |
| Gap | Gets or sets the spacing in pixels between toasts. | `int` | `14` |
| Offset | Gets or sets the offset from the screen edges. | `Offset` | `-` |
| MobileOffset | Gets or sets the offset from the screen edges on mobile devices. | `Offset` | `-` |
| Expand | Gets or sets a value indicating whether toasts should be expanded by default. | `bool` | `false` |
| CloseButton | Gets or sets a value indicating whether to show a close button on toasts. | `bool` | `false` |
| RichColors | Gets or sets a value indicating whether to enable rich color styling for toasts. | `bool` | `false` |
| Dir | Gets or sets the document direction for the toast layout. | `DocumentDirection` | `DocumentDirection.Auto` |