Toast

Toast system built from useToast, ArchToastViewport, and individual ArchToast items.

Usage

<script setup>
import { ArchToastViewport, useToast, ArchButton } from "@archora/ui";

const toast = useToast();
</script>

<template>
  <ArchButton @click="toast.success({ title: 'Saved' })">Show toast</ArchButton>
  <ArchToastViewport />
</template>

Live sandbox

Toast can be tested directly on this page.

interactive

toast.show({ title: "Saved", variant: "success" })

Props

Prop	Type	Default	Description
ArchToast.toast	{ id: string; title: string; description?: string; variant?: "info" | "success" | "warning" | "danger" }	-	Toast message object.
ArchToastViewport.position	"top-right" | "top-left" | "bottom-right" | "bottom-left"	"top-right"	Fixed viewport position.