Toast

The Toast component is a transient, non-blocking notification that appears briefly to provide feedback to the user. It is typically used to display messages such as success, error, warning, or informational alerts. Toasts appear at a designated area of the screen, often at the bottom or top, and automatically disappear after a few seconds, ensuring a smooth and unobtrusive user experience.

Source

Github

import { Button } from 'welcome-ui/Button'
import { toast } from 'welcome-ui/Toast'
import { classNames } from '@/utils'

const cx = classNames()

const Element = () => (
  <div
    className={cx(
      'bg-neutral-10',
      'border-beige-30',
      'border-solid',
      'border-1px',
      'rounded-md',
      'text-neutral-90',
      'p-sm'
    )}
  >
    Lorem ipsum dolor sit amet
  </div>
)

const Example = () => {
  return <Button onClick={() => toast(<Element />)}>Show Toast</Button>
}

export default Example

Examples

Toast component with react-hot-toast and 2 components:

Growl
Snackbar

Notifications

Before using the component, you must add the Toast component in your project root. This component will contain all your toasts.

function App() {
  return <Toast />
}

toast

Use toast function to show the toast element. This function returns a unique identifier that can be used to update or remove the toast later.

Options

The toast function takes a component to be displayed and an options object:

position: one of top-left, top-center, top-right, bottom-left, bottom-center or bottom-right
duration: before closing the element, in ms, with a default 7000. It can also be set to null to prevent your element from closing automatically.
id: a unique identifier for the toast that can be used to update or remove it later and prevent duplicates

Position

Github

Supplied components

You can create your own notification component to display in the Toast or one of our default components: Snackbar and Growl.

In general:

Snackbar is used to display a temporary, information-only notification, and
Growl is used to display a more important notification with an action (that requires the user to close the notification)

Github

Close or dismiss a toast

You can close or dismiss a toast programmatically with the dismiss and remove functions. Dismiss will hide the toast with a fade out animation, while remove will hide the toast immediately.

const toastId = toast(<Toast />)

// Remove or dismiss this specific toast
remove(toastId)
dismiss(toastId)

// Remove or dismiss all toasts
remove()
dismiss()

Sticky note Checkbox