Result Toast

Non-blocking notification for results.

Features

• Auto-dismiss — Configurable duration
• Pause on hover — Timer pauses when hovered
• Multiple positions — 6 position options
• Progress indicator — Visual countdown

Usage

<script setup>
import { ref } from 'vue'
import { FkResultToast } from '@fortune-kit/components'

const showToast = ref(false)
</script>

<template>
  <FkResultToast
    v-model:visible="showToast"
    type="win"
    title="You won"
    :amount="500"
    currency="$"
    subtitle="Keep up the streak!"
    position="top-right"
    :duration="5000"
  />
</template>

Props

Prop	Type	Default	Description
visible	boolean	Required	Toast visibility
type	'win' | 'lose' | 'info'	'info'	Result type
title	string	Required	Main title
subtitle	string	—	Additional text
amount	number	—	Value to display
currency	string	—	Currency symbol
duration	number	5000	Auto-dismiss time (ms)
position	string	'top-right'	Screen position

Positions

• top-right (default)
• top-left
• top-center
• bottom-right
• bottom-left
• bottom-center

Events

Event	Description
update:visible	v-model for visibility
close	When toast closes