Toast

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

Install and import #

useToast #

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

Options #

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)

Snackbar #

Growl #

Custom close function #

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

Properties #

Toast #

NameType(s)DefaultRequired
children
node
icon
node
onClose
func
variant
error
info
success
valid
warning
info

Toast.Title #

NameType(s)DefaultRequired
children
node
icon
node
variant
error
info
success
valid
warning
info

Dependencies #

Peer dependencies #