Appearance

Push Methods ​

Overview ​

In any file or component call the push methods to create notifications:

js
push.success({
  title: 'Message sent',
  message: 'Your message has been successfully sent.'
})

If not defining any other option besides message, pass the string as the only argument:

js
push.success('Your message has been successfully sent.')

Error ​

js
push.error('Something went wrong. Please try again later.')

Warning ​

js
push.warning('Your microphone is muted. Please turn it on.')

Info ​

js
push.info('You can use the keyboard to navigate the menu.')

Clear / Destroy ​

js
const success = push.success('This is a success message.')

success.clear() // Play 'leave' animation and destroy notification
success.destroy() // Destroy notification immediately

Clear All / Destroy All ​

js
push.clearAll() // Play 'clearAll' animation and destroy any notification
push.destroyAll() // Destroy any notification immediately

Promise-based notifications ​

Promise-based or loading notifications can be created by calling the promise method (or its alias load):

In addition to the clear and destroy methods, the retuned object also has a resolve and reject methods that can be used to update the notification with new options.

ts
async function sendMessage() {
  const notification = push.promise("We're sending your message, hold on...")

  try {
    await new Promise((resolve, reject) =>
      setTimeout(Math.random() > 0.5 ? resolve : reject, 2000)
    )
    notification.resolve('Your message has been successfully sent!')
  } catch (err) {
    notification.reject(
      'There was an error sending your message. Please try again.'
    )
  }
}

💡 success and error methods are also available as aliases of resolve and reject respectively.