Import
import { toast } from 'sonner' ; import { Toaster } from '@strongtie/design-system/toaster' ;
Usage
function App () { return ( <> < Toaster /> < Button variant = 'outline' onClick = { () => { toast ( 'Success' , { description: 'Your message has been sent.' , action: { label: 'Confirm' , }, closeButton: true , }) } } > Send Message </ Button > </> ) } <Toaster> PropsWhether to expand toasts to fill the available width.
Maximum number of visible toasts at the same time.
Whether to show a close button on each toast.
offset
string | number | object
default: "32"
Distance in pixels from the edge of the viewport. Can be a number, string, or object with specific sides.
mobileOffset
string | number | object
default: "16"
Offset for mobile devices (screen width < 600px).
theme
"light" | "dark" | "system"
default: "\"light\""
The theme of the toasts.
Whether to use rich colors for the toasts.
hotkey
string[]
default: "[\"altKey\", \"KeyT\"]"
Keyboard shortcut to focus on the latest toast.
Default options for all toasts.
Unique identifier for this toaster instance.
Text direction, either “ltr” (left-to-right) or “rtl” (right-to-left).
Inverts the colors of the toasts.
Gap between toasts in pixels.
Array of directions to allow for swipe dismissal. Default is based on the position.
Custom icons for different toast types.
toast() OptionsSecondary text for the toast.
Whether to show a close button on this toast.
Inverts the colors of the toast.
Duration in milliseconds before the toast disappears.
Whether the toast can be dismissed by clicking or swiping.
Icon to show alongside the toast message.
Action button configuration. Can be a React component or an object with label and onClick.
Cancel button configuration. Can be a React component or an object with label and onClick.
Unique identifier for this toast.
Test ID for the toast (useful for testing).
ID of the toaster to show this toast in, when using multiple toasters.
Callback called when the toast is dismissed.
Callback called when the toast is automatically closed after duration.
containerAriaLabel
string
default: "\"Notifications\""
ARIA label for the toast container.
Custom styles for the action button.
Custom styles for the cancel button.
Usage Examples Basic Toast
Success Toast
Error Toast
Toast with Action
Custom Toast
import { toast } from 'sonner' import { Toaster } from '@strongtie/design-system/toaster' function App () { return ( <> < Toaster /> < button onClick = { () => toast ( 'Hello World!' ) } > Show Toast </ button > </> ) }
Styling Classes The following CSS classes are applied by the Toast components:
toaster – Root toaster container managing toast positioning and stackingtoast – Individual toast notification containertoast-title – Toast message title texttoast-description – Secondary descriptive text contenttoast-action – Action button styling within the toasttoast-cancel – Cancel button styling (when present)toast-close – Close button styling for manual dismissal For more examples, visit the Storybook . Initialize the Toaster service to your application, typically in your main layout or App component: protected override async Task OnInitializedAsync () { // Initialize with options await ToastService . Initialize ( new ToasterOptions { Position = "bottom-right" }); } Use the ToastService to show a toast message: @inject ToastService ToastService < StudsButton Text = "Show notification" Click = @(args = > ShowDefaultNotification( "Toast", new ToastOptions { Description = "Description", CloseButton = true, Duration = 5000, })) /> @code { void ShowDefaultNotification ( string message , ToastOptions options = null ) { ToastService . Show ( message , options ); } } ToasterOptionsGets or sets the position of the toaster on the screen (e.g., “top-right”, “bottom-left”).
ToastOptionsGets or sets the type of toast (e.g., “error”).
Gets or sets the description text of the toast.
Gets or sets whether the toast should have a close button.
Gets or sets the duration in milliseconds for which the toast should be visible.
ToastService MethodsInitializes the toaster service with the specified options.
Shows a toast message with the specified text and options.
Dismisses a toast message by its ID.
Usage Examples Basic Toast
Toast with Options
Error Toast
Promise-based Toast
Initialize with Custom Position
@inject ToastService ToastService < StudsButton Text = "Show Basic Toast" Click = " @ ShowBasicToast " /> @code { async Task ShowBasicToast () { await ToastService . Show ( "Hello from Blazor!" ); } }
Styling Classes The following CSS classes are applied by the Toast service:
toaster – Root toaster container managing notification positioningtoast – Individual toast notification stylingtoast-title – Main message text stylingtoast-description – Secondary description texttoast-action – Action button within toast notificationstoast-close – Close button for manual dismissaltoast-loading – Loading state indicator (for promise-based toasts) For more examples, visit the Storybook . 