Toast

Floating notification with variants, actions and auto-dismiss. Toasts are created from script through useToast, so there is no markup to place — the module mounts the toast host for you.

Live Demo

Variants

Positions

Actions

Handlers run, then the toast closes itself. Pass keepOpen to leave it up, or call close() from the handler to dismiss it early. Hovering a stack pauses every countdown in it.

Shown timeout

showTimeout draws a depleting bar along the bottom edge for exactly the toast's timeout. Hovering or focusing the stack freezes the bar together with the countdown it represents. A sticky toast (timeout: 0) never grows one — there is nothing to count down.

Scoped to an element

Pass target to keep a toast inside one region instead of the viewport corner.

This panel owns its own toast stack.

Usage

Basic

<script setup>
const { showToast } = useToast();

function save() {
  showToast({ message: "Changes saved", variant: "success" });
}
</script>

With actions

<script setup>
const { showToast } = useToast();

function deleteFile(file) {
  trash(file);

  showToast({
    title: "File deleted",
    message: `${file.name} moved to trash.`,
    variant: "alert",
    timeout: 0,
    actions: [{ label: "Undo", onClick: () => restore(file) }],
  });
}
</script>

Standalone component

<orio-toast> also works on its own — inside a page, a list, or a custom container — when you want a static notice rather than a queued one. It emits rather than acts, so nothing dismisses it but you. The actions slot is the straightforward way to wire buttons here; the actions prop expects handlers shaped for the queue.

Storage almost full

You have used 92% of your plan.

<template>
  <orio-toast
    v-if="!dismissed"
    title="Storage almost full"
    message="You have used 92% of your plan."
    variant="alert"
    @close="dismissed = true"
  >
    <template #actions>
      <orio-button @click="goToBilling">Upgrade</orio-button>
    </template>
  </orio-toast>
</template>

Props

Prop	Type	Default	Description
message	string	""	Body text; ignored when the default slot is used
title	string	—	Bold line above the message
variant	"info" | "success" | "alert" | "danger"	"info"	Color family and screen-reader urgency
closable	boolean	true	Renders the close button
timeout	number	0	Duration the countdown bar runs for, in ms
showTimeout	boolean	false	Draws the countdown bar; needs timeout > 0
paused	boolean	false	Freezes the countdown bar
actions	ToastAction[]	[]	Buttons rendered on the trailing side

Events

Event	Payload	Description
close	—	Close button clicked
action	ToastAction	One of the action buttons clicked

Slots

Slot	Props	Description
default	—	Replaces the message text
actions	{ actions, close }	Replaces the rendered action buttons

Accessibility

• danger toasts render role="alert", every other variant role="status".
• The close button is labelled through i18n (toast.close).
• Hovering or focusing a stack pauses its countdowns, so keyboard users are not raced by the timeout.