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

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