Toast

For more examples, visit the Storybook.

Before usage, ensure you have installed the sonner package:

npm install sonner

Add the <Toaster /> component to your application, typically in your main layout or App component:

import { Toaster } from '@studs/react/toaster'

function App() {
  return (
    <>
      <Toaster />
      {/* Other components */}
    </>
  )
}

Example

import { toast } from 'sonner'
...
<StudsButton
    variant='outline'
    onClick={() => {
      toast('Success', {
        description: 'Your message has been sent.',
        action: {
          label: 'Confirm',
        },
        closeButton: true,
      })
    }}
  >
    Send Message
  </StudsButton>

`<Toaster />` Props

(Please refer to the sonner documentation for detailed props and options.)

`toast()` Props

(Please refer to the sonner documentation for detailed props and options.)

For more examples, visit the Storybook.

Before usage, ensure you have installed the sonner package:

npm install sonner

Add the <Toaster /> component to your application, typically in your main layout or App component:

import { Toaster } from '@studs/react/toaster'

function App() {
  return (
    <>
      <Toaster />
      {/* Other components */}
    </>
  )
}

Example

import { toast } from 'sonner'
...
<StudsButton
    variant='outline'
    onClick={() => {
      toast('Success', {
        description: 'Your message has been sent.',
        action: {
          label: 'Confirm',
        },
        closeButton: true,
      })
    }}
  >
    Send Message
  </StudsButton>

`<Toaster />` Props

(Please refer to the sonner documentation for detailed props and options.)

`toast()` Props

(Please refer to the sonner documentation for detailed props and options.)

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:

Example

@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);
      }
  }

`ToasterOptions`

Position

string

Gets or sets the position of the toaster on the screen (e.g., “top-right”, “bottom-left”).

`ToastOptions`

Type

string | null

Gets or sets the type of toast (e.g., “error”).

Description

string

Gets or sets the description text of the toast.

CloseButton

bool

default:"false"

Gets or sets whether the toast should have a close button.

Duration

double?

Gets or sets the duration in milliseconds for which the toast should be visible.

`ToastService` Methods

Initialize

ToasterOptions

Initializes the toaster service with the specified options.

Show

string, ToastOptions

Shows a toast message with the specified text and options.

Remove

string

Dismisses a toast message by its ID.

Getting Started

Foundations

Components

Integration

Content

`<Toaster />` Props

`toast()` Props

`<Toaster />` Props

`toast()` Props

`ToasterOptions`

`ToastOptions`

`ToastService` Methods

Getting Started

Foundations

Components

Integration

Content

​<Toaster /> Props

​toast() Props

​<Toaster /> Props

​toast() Props

​ToasterOptions

​ToastOptions

​ToastService Methods

`<Toaster />` Props

`toast()` Props

`<Toaster />` Props

`toast()` Props

`ToasterOptions`

`ToastOptions`

`ToastService` Methods