Toast

A toast confirms that something happened, or reports a problem, without interrupting. Create one toaster for the app, render <Toaster> once, and call toaster.create() from anywhere.

import { Toaster, createToaster } from '@beyul/sulmu-ui'

Source

Examples

Tones

type picks the colour: success, info, warning or error.

SuccessInfoWarningDanger

import { Button, createToaster, Flex, Toaster } from '@beyul/sulmu-ui'

// One toaster for the whole app, created outside any component.
const toaster = createToaster()

const show = (type: 'success' | 'info' | 'warning' | 'error') =>
  toaster.create({ type, title: 'Title here', description: 'Body text here' })

export default function Example() {
  return (
    <Flex gap={3} wrap>
      <Button variant="secondary" onClick={() => show('success')}>
        Success
      </Button>
      <Button variant="secondary" onClick={() => show('info')}>
        Info
      </Button>
      <Button variant="secondary" onClick={() => show('warning')}>
        Warning
      </Button>
      <Button variant="secondary" onClick={() => show('error')}>
        Danger
      </Button>
      {/* Render the Toaster once, near the root of the app. */}
      <Toaster toaster={toaster} />
    </Flex>
  )
}

Action and loading

action: { label, onClick } adds a button on the right. type: 'loading' shows a spinner.

With an actionLoading

import { Button, createToaster, Flex, Toaster } from '@beyul/sulmu-ui'

const toaster = createToaster({ placement: 'top-end', duration: 8000 })

export default function Example() {
  return (
    <Flex gap={3} wrap>
      <Button
        variant="secondary"
        onClick={() =>
          toaster.create({
            type: 'error',
            title: 'Could not save',
            description: 'Check your connection.',
            action: { label: 'Try Again', onClick: () => {} },
          })
        }
      >
        With an action
      </Button>
      <Button
        variant="tertiary"
        onClick={() =>
          toaster.create({ type: 'loading', title: 'Saving', description: 'One moment' })
        }
      >
        Loading
      </Button>
      <Toaster toaster={toaster} />
    </Flex>
  )
}

API

createToaster(options)

Option	Type	Default	Description
placement	"top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"	bottom-end	Where toasts appear.
duration	number	5000	How long a toast stays, in milliseconds.
max	number	4	Most toasts shown at once.

It returns the toaster (type ToasterStore). toaster.create({ type, title, description, action }) shows a toast.

Toaster

Prop	Type	Default	Description
toaster*	CreateToasterReturn<ReactNode>	-	The object returned by createToaster().

Accessibility and usage

• Create the toaster outside of any component, once per app, and export it.
• Render <Toaster toaster={toaster} /> once, near the root of the app.
• Keep toasts short, and do not use them for errors the user must act on in a form: show those next to the field with Field errorText.