Toast

Lightweight notification component for global feedback.

Basic Usage

Control visibility with v-model.

<template>
  <ABtn @click="show = true">Show Toast</ABtn>
  <AToast v-model="show">This is a notification message</AToast>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
</script>

Closable

Use the closable prop to show a close button.

<template>
  <ABtn @click="show = true">Closable</ABtn>
  <AToast v-model="show" closable>Click the × to close</AToast>
</template>

Auto-Close

Set duration in milliseconds. 0 means it won't auto-close.

<template>
  <ABtn @click="show = true">2s auto-close</ABtn>
  <AToast v-model="show" :duration="2000">Auto-disappears after 2s</AToast>
</template>

Combinations

Multiple props combined.

<template>
  <ABtn @click="show = true">Show Toast</ABtn>
  <AToast v-model="show" :duration="5000" closable>
    Auto-closes after 5s, or click × to close manually
  </AToast>
</template>

API

Props

Name	Type	Default	Description
modelValue	boolean	false	Visibility
duration	number	3000	Auto-close delay (ms), 0 means persistent
closable	boolean	true	Show close button

Events

Name	Parameters	Description
update:modelValue	value: boolean	Visibility changed
close	—	Triggered when closed