Sonner

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'
...

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'

function ToastButton() {
  const { show } = useSonner()

  const showToast = () => {
    show({
      title: 'Event has been created',
      description: 'Sunday, December 03, 2023 at 9:00 AM',
      action: { label: 'Undo' },
    })
  }

  return <Button variant="outline" onClick={showToast}>Show Toast</Button>
}

export default function SonnerDemoExample() {
  return (
    <SonnerProvider>
      <ToastButton />
      <SonnerViewport />
    </SonnerProvider>
  )
}

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'
...

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'

function TypeButtons() {
  const { show, dismiss } = useSonner()

  const showPromise = () => {
    const id = show({ title: 'Loading...', variant: 'promise', duration: 0 })
    void new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
      dismiss(id)
      show({ title: 'Event has been created', variant: 'success' })
    })
  }

  return (
    <div class="flex flex-wrap gap-2">
      <Button variant="outline" onClick={() => show({ title: 'Event has been created' })}>Default</Button>
      <Button variant="outline" onClick={() => show({ title: 'Event has been created', variant: 'success' })}>Success</Button>
      <Button variant="outline" onClick={() => show({ title: 'Be at the area 10 minutes before the event time', variant: 'info' })}>Info</Button>
      <Button variant="outline" onClick={() => show({ title: 'Event start time cannot be earlier than 8am', variant: 'warning' })}>Warning</Button>
      <Button variant="outline" onClick={() => show({ title: 'Event has not been created', variant: 'error' })}>Error</Button>
      <Button variant="outline" onClick={showPromise}>Promise</Button>
    </div>
  )
}

export default function SonnerTypesExample() {
  return (
    <SonnerProvider>
      <TypeButtons />
      <SonnerViewport />
    </SonnerProvider>
  )
}

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'
...

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'

function ToastButton() {
  const { show } = useSonner()
  return (
    <Button
      variant="outline"
      onClick={() => show({
        title: 'Event has been created',
        description: 'Monday, January 3rd at 6:00pm',
      })}
    >
      Show Toast
    </Button>
  )
}

export default function SonnerDescriptionExample() {
  return (
    <SonnerProvider>
      <ToastButton />
      <SonnerViewport />
    </SonnerProvider>
  )
}

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'
...

import { Button } from '@/components/ui/button'
import { SonnerProvider, SonnerViewport, useSonner } from '@/components/ui/sonner'

const positions = [
  ['Top Left', 'top-left'],
  ['Top Center', 'top-center'],
  ['Top Right', 'top-right'],
  ['Bottom Left', 'bottom-left'],
  ['Bottom Center', 'bottom-center'],
  ['Bottom Right', 'bottom-right'],
] as const

function PositionButtons() {
  const { show } = useSonner()
  return (
    <div class="flex flex-wrap gap-2">
      {positions.map(([label, position]) => (
        <Button variant="outline" onClick={() => show({ title: 'Event has been created', position })}>
          {label}
        </Button>
      ))}
    </div>
  )
}

export default function SonnerPositionExample() {
  return (
    <SonnerProvider>
      <PositionButtons />
      <SonnerViewport />
    </SonnerProvider>
  )
}