Sonner
An opinionated toast component for Angular.
Default
The standard sonner toast component.
sonner-example-default.ts
Colors & States
Sonner supports different toast types for success, info, warning, and error states.
sonner-example-colors.ts
Educational Examples
Examples showing how to use sonner for different content types with explanations.
Spartan UI Integration
Learn how to use Sonner with Spartan UI for elegant notifications.
Tailwind CSS Styling
Toasts are fully themeable using Tailwind CSS utility classes.
sonner-example-text.ts
Installation & Usage
Installation
Imports
Basic Usage
API Reference
Helm API
The Helm component provides the spartan/ui styling for the toaster.
| Component | Selector | Inputs |
|---|---|---|
| HlmToaster | hlm-toaster | Supports all inputs from ngx-sonner's Toaster component. |
Brain API
Sonner is built on top of ngx-sonner. You can use the toast function to trigger toasts.
| Function | Description |
|---|---|
| toast(message, options?) | Creates a default toast notification. |
| toast.success(message, options?) | Creates a success toast notification. |
| toast.info(message, options?) | Creates an info toast notification. |
| toast.warning(message, options?) | Creates a warning toast notification. |
| toast.error(message, options?) | Creates an error toast notification. |