Toast

Light, dismissible feedback for results and reminders.

Basic usage

Live preview

View Vue source

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmToast } from 'augma'
import { computed, nextTick, shallowRef } from 'vue'

const messages = {
  success: { title: 'Settings saved', description: 'Your new display preferences are in effect.' },
  warning: { title: 'Low battery', description: 'Connect to power to keep going.' },
  danger: { title: 'Sync incomplete', description: 'Check your network connection and try again.' },
  neutral: { title: 'Preview mode', description: 'Actions here only affect this local example.' },
}
const open = shallowRef(false)
const tone = shallowRef<keyof typeof messages>('success')
const message = computed(() => messages[tone.value])

async function show(nextTone: keyof typeof messages) {
  open.value = false
  await nextTick()
  tone.value = nextTone
  open.value = true
}
</script>

<template>
  <div class="example-row">
    <AgmButton @click="show('success')">Save settings</AgmButton>
    <AgmButton variant="outline" @click="show('warning')">Show warning</AgmButton>
    <AgmButton variant="outline" @click="show('danger')">Simulate failure</AgmButton>
    <AgmButton variant="ghost" @click="show('neutral')">Show message</AgmButton>
    <AgmToast
      v-model:open="open"
      :tone="tone"
      :title="message.title"
      :description="message.description"
      close-label="Close notification"
      region-label="Notifications (F8)"
    />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
</style>

API

Prop	Type	Default	Description
tone	'success' | 'warning' | 'danger' | 'neutral'	'success'	Status meaning; the title must state the result too, not rely on color alone
open	boolean	false	Updated through v-model:open
title	string	Required	Notification title
description	string	undefined	Supporting text
duration	number	5000	Time before it closes automatically (ms)
closeLabel	string	'关闭通知'	Accessible name of the close button
regionLabel	string	'通知（F8）'	Accessible name of the notification region; mention the F8 shortcut

Events

• update:open(boolean)

Keyboard and usage notes

F8 focuses the notification region; Escape or the close button dismisses it. The countdown pauses on hover or focus. Use one AgmToast per app.

Installation

import { AgmToast } from 'augma'
import 'augma/style.css'