Toast ​

A short message about something that just happened. It goes away by itself; a click removes it sooner.

Put one OToaster in your app, then call toast() from anywhere:

<!-- App.vue -->
<template>
  <OBackground />
  <RouterView />
  <OToaster />
</template>

import { toast } from 'oyna-ui'

toast('Link copied')
toast('Saved', { tone: 'accent' })
toast('Could not save. Try again.', { tone: 'danger' })
toast('Stays until clicked', { duration: 0 })

A toast is plain by default. The ring is a signal here as everywhere: accent for the result the user was waiting for, danger for something that went wrong. A danger toast is announced by screen readers at once, the others when the reader is idle.

API ​

toast(message, options?) returns the toast's id.

dismissToast(id) removes a toast.