Toast

SToast is a pop-up notification about the result of an action. It is built on Reka UI (a portal into the ToastViewport region, auto-dismiss, swipe, screen reader roles) and reuses SIcon for the status icon. Toasts are shown imperatively with the useToast composable, and ToastProvider renders the queue.

Setup

Mount ToastProvider once at the root of the app (for example, in App.vue):

<template>
  <ToastProvider />
  <RouterView />
</template>

Then show notifications from any component:

<script setup lang="ts">
import { useToast } from '@smalt-ui/core'

const { toast } = useToast()

function onSave() {
  toast({
    title: 'Saved',
    description: 'Your changes have been applied',
    variant: 'positive',
  })
}
</script>

Variants

Color

The color option of toast() sets the icon color from the palette and overrides the variant color.

Position

The position prop of ToastProvider sets the corner where notifications appear: bottom-right (default), bottom-left, top-right and top-left. There is one corner for the whole app — the provider is mounted as a single instance. A new notification always appears at its edge, and older ones move further into the screen.

Swiping follows the position: in the right corners a notification is swiped to the right, in the left ones to the left.

The notification region is teleported to body, so it is not covered by a header, a sidebar or any other ancestor with its own stacking context — the provider can be mounted anywhere inside the app.

The corner can also be set globally — through prop defaults, including the defaults option of the Nuxt module:

createSUI({ defaults: { ToastProvider: { position: 'top-right' } } })

useToast()

The composable returns:

• toast(options) — shows a notification and returns its id. Options: title (required), description, variant (info · success · warning · danger), duration (ms).
• dismiss(id) — removes a notification manually.
• toasts — the reactive (read-only) queue of current notifications.

API

SToast

Props

Name	Type	Default	Description
title*	string	required	Toast title.
description	string	undefined	Additional text below the title.
variant	| "info" | "positive" | "negative" | "warning"	"info"	Semantic variant: affects the icon and the accent color.
color	string	undefined	Accent color (of the icon): a name from the palette (primary/teal/teal-10). Overrides the variant color.
duration	number	5000	Time in milliseconds after which the toast hides automatically.
close-label	string	undefined	Accessible name of the close button (defaults to the locale dictionary).
square	boolean	undefined	Square corners: removes the rounding of the toast card.
flat	boolean	undefined	Removes the shadow. Overridden by the elevation prop when it is set.
elevation	0 | 1 | 2 | 3 | 4 | 5	undefined	Shadow level 0–5 (scale); 0 means no shadow. Overrides flat.

Events

Name	Signature	Description
close	() => void	The toast closed (by timer, swipe or button).

ToastProvider

Props

Name	Type	Default	Description
duration	number	5000	Default display duration for all notifications, in ms.
position	| "bottom-right" | "top-left" | "top-right" | "bottom-left"	"bottom-right"	Screen corner where notifications appear (bottom-right by default). There is one corner per app, since a single provider instance is expected. The swipe direction follows from it: a notification is swiped toward its own edge.
label	string	undefined	Accessible label of the notification region (defaults to the locale dictionary).

Slots

Name	Description
default