Toaster

UiToaster

The place where toasts appear: short messages about the result of an action, such as a save completing or the connection dropping. Place one at the root of your app and show toasts with useToast().

Code

vue

<script setup lang="ts">
import { UiButton, UiToaster, useToast } from '@wing-land/ui'
const toast = useToast()

function save() {
  toast.promise(new Promise((resolve) => setTimeout(resolve, 1200)), {
    loading: 'Saving…',
    success: 'Saved',
    error: 'Could not save',
  })
}
</script>
<template>
  <div class="demo">
    <UiButton @click="toast.show({ title: 'Link copied', tone: 'success', important: true })"
      >Copy link</UiButton
    >
    <UiButton
      @click="
        toast.show({
          title: 'Note archived',
          description: 'You can restore it from the archive.',
          action: { label: 'Undo', altText: 'Open the archive to restore the note' },
        })
      "
      >Archive</UiButton
    >
    <UiButton @click="save">Save</UiButton>
    <UiButton
      @click="
        toast.show({
          id: 'offline',
          title: 'Offline',
          description: 'Changes are kept on this device.',
          tone: 'warning',
          duration: 0,
        })
      "
      >Go offline</UiButton
    >
    <!-- Place one UiToaster near the root of the app. -->
    <UiToaster />
  </div>
</template>
<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1rem 0;
}
</style>

Usage

const toast = useToast()
toast.show({ title: 'Saved', tone: 'success' })
toast.show({ id: 'offline', title: 'Offline', tone: 'warning', duration: 0 })
await toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Could not save' })

Toasts with duration: 0 do not close on their own. Showing a toast with an existing id replaces it. When adding an action button, describe in altText how to do the same thing without the toast. Toasts disappear, so never make them the only way to perform an action.

Accessibility

Toasts marked important are announced right away; others wait until the current announcement finishes. F8 moves focus to the toast area. Toasts do not close on their own while hovered or focused. Built on the Reka UI Toast.

API

Props

Prop	Default	Type
`duration` Time in milliseconds before a toast closes on its own.	`5000`	`number`
`limit` Maximum number of toasts shown at once. Extra toasts wait until earlier ones close.	`3`	`number`
`position` Position on the screen.	`'bottom-end'`	`'bottom-end' \| 'bottom-center' \| 'top-end' \| 'top-center'`

Toaster ​

UiToaster ​

Code ​

Usage ​

Accessibility ​