overlaystoast

Toast

Temporary notification messages backed by the solid-toaster package.

Import#

Install solid-toaster:

bun add solid-toaster

Then import styles, mount a Toaster instance.

import 'solid-toaster/style.css'

import { Button } from '@subframe7536/moraine'
import { Toaster, toast } from 'solid-toaster'

export default function App() {
  return (
    <>
      <Button onClick={() => toast.success('Saved!')}>Toast</Button>
      <Toaster />
    </>
  )
}

Examples#

Basic Toasts#

Send status toasts to the global toaster instance, including loading to success update.

1
function BasicToasts() {
2
  const wait = (ms: number) =>
3
    new Promise<void>((resolve) => {
4
      setTimeout(resolve, ms)
5
    })
6

7
  const runLoadingToast = async () => {
8
    const id = toast.loading('Uploading files...')
9
    await wait(1200)
10
    toast.success('Upload complete', { id })
11
  }
12

13
  return (
14
    <div class="flex flex-wrap gap-3 items-center">
15
      <Button onClick={() => toast('Default message', { onAutoClose: console.log })}>
16
        Default
17
      </Button>
18
      <Button variant="secondary" onClick={() => toast.success('Saved successfully')}>
19
        Success
20
      </Button>
21
      <Button variant="outline" onClick={() => toast.warning('Careful with this action')}>
22
        Warning
23
      </Button>
24
      <Button variant="destructive" onClick={() => toast.error('Something went wrong')}>
25
        Error
26
      </Button>
27
      <Button variant="ghost" onClick={runLoadingToast}>
28
        Loading -&gt; Success
29
      </Button>
30
    </div>
31
  )
32
}

Promise + Scoped Instances#

Use toast.promise for async lifecycle and route toasts by toasterId.

1
function PromiseScopedInstances() {
2
  const [promiseRuns, setPromiseRuns] = createSignal(0)
3
  const wait = (ms: number) =>
4
    new Promise<void>((resolve) => {
5
      setTimeout(resolve, ms)
6
    })
7

8
  const runPromiseToast = () => {
9
    const nextRun = promiseRuns() + 1
10
    setPromiseRuns(nextRun)
11
    const request = wait(1400).then(() => ({ run: nextRun }))
12

13
    toast.promise(request, {
14
      loading: `Sync #${nextRun} in progress...`,
15
      success: (result) => `Sync #${result.run} finished`,
16
      error: (error) => `Sync failed: ${String(error)}`,
17
      duration: 1e6,
18
    })
19
  }
20

21
  return (
22
    <div class="flex flex-wrap gap-3 items-center">
23
      <Button onClick={runPromiseToast}>Run promise toast ({promiseRuns()})</Button>
24
      <Button
25
        variant="outline"
26
        onClick={() => toast.info('To bottom-left custom', { toasterId: 'custom' })}
27
      >
28
        Send to custom toaster
29
      </Button>
30
      <Button variant="ghost" onClick={() => toast.dismiss()}>
31
        Dismiss all
32
      </Button>
33
    </div>
34
  )
35
}