Welcome UI logo

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
OverviewProps
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-lg',
      '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

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)

Snackbar

At bottom center by default.

Growl

At top right by default.

Custom close function

You can add your custom function when user click on close button

Without close button on Growl or Snackbar

You can choose not to show a close button on Growl or Snackbar with the hasCloseButton prop (defaults to true).

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()
AlertCheckbox