Toaster

Mount one FzToaster per app and call useToast() anywhere. Toasts slide into a polite live region, drain a timer along the bottom edge, and pause while the pointer or focus is inside the stack. Danger toasts use role alert. Source-copy installs import useToast from composables/useToast.

Preview

Open in the playground

Usage

ToasterExample.vueVue / TS

<script setup lang="ts">
import { FzButton, FzToaster, useToast } from '@chrisdalbano/forza-ui'
const { toast } = useToast()
function save(): void {
  toast({ title: 'Build saved', tone: 'success' })
}
</script>

<template>
  <FzButton @click="save">Save build</FzButton>
  <FzToaster />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
label	string | undefined	No	"Notifications"
position	"bottom-right" | "top-right" | "bottom-center" | undefined	No	"bottom-right"
limit	number | undefined	No	4

Events and state

useToast() owns the queue: toast(options) returns an id, dismiss(id?) removes one or all

Slots

none

Add from source

forza add toaster

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.