Toaster

Toast notification container built on Sonner

Default

Usage

import { Toaster } from '@tryvienna/ui'

<div>
  <Toaster />
  <Button onClick={() => toast('Event has been created')}>Show Toast</Button>
</div>

Examples

Default

Default

<div>
  <Toaster />
  <Button onClick={() => toast('Event has been created')}>Show Toast</Button>
</div>

Success

Success

<div>
  <Toaster />
  <Button onClick={() => toast.success('Profile updated successfully')}>
    Show Success Toast
  </Button>
</div>

Error

Error

<div>
  <Toaster />
  <Button variant="destructive" onClick={() => toast.error('Something went wrong')}>
    Show Error Toast
  </Button>
</div>

Promise

Promise

<div>
  <Toaster />
  <Button
    onClick={() =>
      toast.promise(new Promise((resolve) => setTimeout(resolve, 2000)), {
        loading: 'Saving...',
        success: 'Saved!',
        error: 'Failed',
      })
    }
  >
    Show Promise Toast
  </Button>
</div>

With Description

With Description

<div>
  <Toaster />
  <Button
    onClick={() =>
      toast('Event created', {
        description: 'Monday, January 3rd at 6:00 PM',
      })
    }
  >
    Show Toast with Description
  </Button>
</div>

API Reference

Data Attributes

Component	data-slot
Toaster	"toaster"