Toast

import { Button, toast } from 'ferry-ui'

export default function ToastHero() {
  return (
    <Button variant="primary" onClick={() => toast.success('Settings saved')}>
      Save changes
    </Button>
  )
}

import { Button, toast } from 'ferry-ui'

export default function ToastTypes() {
  return (
    <>
      <Button onClick={() => toast('Project archived')}>Neutral</Button>
      <Button onClick={() => toast.success('Invoice sent')}>Success</Button>
      <Button onClick={() => toast.error('Payment failed')}>Error</Button>
      <Button onClick={() => toast.warning('Your trial ends in 3 days')}>Warning</Button>
      <Button onClick={() => toast.info('A new version is available')}>Info</Button>
    </>
  )
}

import { Button, toast } from 'ferry-ui'

export default function ToastDescription() {
  return (
    <Button
      onClick={() =>
        toast.success('Invoice sent', {
          description: 'The customer gets INV-2041 at billing@example.com.',
        })
      }
    >
      Send invoice
    </Button>
  )
}

import { Button, toast } from 'ferry-ui'

export default function ToastAction() {
  return (
    <Button
      onClick={() =>
        toast('Project archived', {
          description: 'The project "Website redesign" is in the archive.',
          action: { label: 'Undo', onClick: () => toast.success('Project restored') },
          cancel: { label: 'Close', onClick: () => {} },
        })
      }
    >
      Archive project
    </Button>
  )
}

import { Button, toast } from 'ferry-ui'

export default function ToastLoading() {
  function exportMembers() {
    const id = toast.loading('Exporting the members…')
    // The same id replaces the toast in place.
    window.setTimeout(() => toast.success('Export ready', { id, description: '128 rows are in the file.' }), 2000)
  }

  return <Button onClick={exportMembers}>Export members</Button>
}

import { Button, getErrorMessage, toast } from 'ferry-ui'

// A request that takes 1.5 seconds. Replace it with your own request.
function saveReport() {
  return new Promise<{ name: string }>((resolve) => {
    window.setTimeout(() => resolve({ name: 'Q3 report' }), 1500)
  })
}

export default function ToastPromise() {
  return (
    <Button
      onClick={() => {
        toast.promise(saveReport(), {
          loading: 'Saving the report…',
          success: (report) => `${report.name} saved`,
          error: (error: unknown) => getErrorMessage(error),
        })
      }}
    >
      Save report
    </Button>
  )
}

import { Button, toast } from 'ferry-ui'

export default function ToastDismiss() {
  return (
    <>
      <Button onClick={() => toast.info('The import is in progress', { id: 'import', duration: Infinity })}>
        Show a toast that stays
      </Button>
      <Button variant="ghost" onClick={() => toast.dismiss('import')}>
        Dismiss it
      </Button>
      <Button variant="ghost" onClick={() => toast.dismiss()}>
        Dismiss all
      </Button>
    </>
  )
}