Toast

A short message that confirms what the user just did, and goes away by itself.

<script setup lang="ts">
import { FsButton, FsToaster, useToast } from '@fivespark/ui'

const toast = useToast()
</script>

<template>
  <div class="min-h-48 w-full">
    <FsButton label="Link kopiëren" @click="toast.show({ title: 'Link gekopieerd' })" />
    <FsToaster />
  </div>
</template>

Usage

Render FsToaster once, near the end of your app, and call show from anywhere.

<script setup lang="ts">
import { FsButton, FsToaster, useToast } from '@fivespark/ui'

const toast = useToast()
</script>

<template>
  <FsButton label="Link kopiëren" @click="toast.show({ title: 'Link gekopieerd' })" />
  <FsToaster />
</template>

The title says what happened ("Offerte verstuurd"), not the status. A toast answers something the user did in the browser; a failure or a warning belongs in an Alert in the page, and anything the user must act on cannot live only in a toast. A toast has text only, with at most one action, and no duration or position to set.

Examples

With a description

One more line for the detail.

<script setup lang="ts">
import { FsButton, FsToaster, useToast } from '@fivespark/ui'

const toast = useToast()
</script>

<template>
  <div class="min-h-48 w-full">
    <FsButton
      label="Offerte versturen"
      @click="toast.show({ title: 'Offerte verstuurd', description: 'Bouwbedrijf Jansen ontvangt hem per e-mail.' })"
    />
    <FsToaster />
  </div>
</template>

With an action

An action, such as undo, is also available in the page. A toast with an action stays until the action is used or the toast is closed.

<script setup lang="ts">
import { FsButton, FsToaster, useToast } from '@fivespark/ui'

const toast = useToast()

function remove() {
  toast.show({
    title: 'Regel verwijderd',
    description: 'Offerte OF-2026-114',
    action: { label: 'Ongedaan maken', onClick: () => toast.show({ title: 'Regel teruggezet' }) },
  })
}
</script>

<template>
  <div class="min-h-48 w-full">
    <FsButton label="Regel verwijderen" @click="remove" />
    <FsToaster />
  </div>
</template>

Info

The status is success unless you give status: 'info', for something that started or changed without being a result.

<script setup lang="ts">
import { FsButton, FsToaster, useToast } from '@fivespark/ui'

const toast = useToast()
</script>

<template>
  <div class="min-h-48 w-full">
    <FsButton
      label="Orders exporteren"
      @click="toast.show({ status: 'info', title: 'Export gestart', description: 'Je krijgt een e-mail als hij klaar is.' })"
    />
    <FsToaster />
  </div>
</template>

Keyboard

Key	Does
Tab	Reaches a toast's action and close button after the page's content; focus is never moved to a toast for you
Esc	Closes the toast that has focus inside it, and nothing else

API Reference

FsToaster