Skip to content
Iryx UI

Composables

useToast ​

Raise a toast from anywhere — a store action, an interceptor, a plain function with no component in scope.

It needs a host ​

The composable writes to a module-level store, and IToaster renders it. Mount exactly one, usually just inside IApp:

vue
<template>
  <IApp>
    <RouterView />
    <IToaster />
  </IApp>
</template>

Because the store is module-level, useToast() works outside setup() — in a Pinia action, an Axios interceptor, a route guard.

ts
// api.ts — no component in sight
import { useToast } from 'iryx-ui'

export async function save(invoice: Invoice) {
  try {
    await http.put(`/invoices/${invoice.id}`, invoice)
    useToast().success('Saved')
  }
  catch {
    useToast().danger('Could not save. Try again.')
  }
}

API ​

MethodReturnsDescription
toast(options)numberRaise a toast; the id lets you dismiss it early
success(options)numberShorthand for variant: 'success'
warning(options)number
danger(options)number
info(options)number
dismiss(id)voidDismiss one toast
clear()voidDismiss every open toast

Every method takes either a string — used as the title — or a ToastOptions object.

ToastOptions ​

FieldTypeDescription
titlestring
descriptionstring
variant'neutral' | 'success' | 'warning' | 'danger' | 'info'
durationnumberMilliseconds before it dismisses itself
action{ label, onClick }A single button inside the toast

Dismissing early ​

toast() returns an id, for a toast that outlives the call — one raised while work is in flight, then replaced by its outcome:

ts
const id = toast.toast({ title: 'Uploading…', duration: 0 })

await upload(file)

toast.dismiss(id)
toast.success('Uploaded')

duration: 0 keeps it open until you dismiss it.

See IToaster for viewport positions, stacking and the rest of the rendering side.