Feedback

Toast

Transient feedback that doesn't block the UI. Toasts auto-dismiss after a few seconds and stack in the bottom-right corner. Use Alert for messages that should stay put.

Setup

Render <Toaster /> once, near the root of your layout. It manages its own portal and listens for everything toast.x() emits:

<script lang="ts">
  import { Toaster } from '@lyeve-labs/ui-kit';
  let { children } = $props();
</script>

{@render children()}
<Toaster />

Showing a toast

Import toast from anywhere (components, load functions, async handlers) and call:

Custom timeout

toast.success('Saved.', 1500);    // dismiss after 1.5s
toast.error('Pinned error', 0);    // 0 disables auto-dismiss

Programmatic dismiss

Every toast.x() returns the new toast id, which you can pass to dismiss():

const id = toast.info('Uploading...', 0);
// later, when the upload finishes:
toast.dismiss(id);

API

The kit has no Toast component. This page documents the toast function, which shows a toast from anywhere in your code. The toasts render in Toaster, which takes no props.