Notification component with toasted-note and 2 components : Growl and Snackbar.

Install and import

yarn add @welcome-ui/toast @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components
import { useToast, Toast } from '@welcome-ui/toast'


Use useToast hook to show the toast element. Example below with a custom component.


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

  • position : one of top-left, top, top-right, bottom-left, bottom (default) or bottom-right
  • duration : before closing element, in ms, with default 5000. Can also be set to null if not automatic close your element.

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)




Peer dependencies