Toast

Show brief feedback for results or status changes, with icons, actions, and rich content.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Toast for brief feedback about an action, with Toaster managing display. Use a persistent content list for notification history or activity records rather than Toast.

Call toast for brief feedback and let Toaster manage the queue. When rendering Toast independently, the page removes it after dismissal.
as="toast" can connect a parent click trigger. Compose attachments with leading and trailing roles; parts configures only the default close Button. Use inherited singleLine with Text lines={1} for short labels. Internal gaps keep at least 4 CSS px; rich multiline content retains its layout.

Import

import { Toast } from '@snowui-design-system/components';

Usage

Sizes

Rich

Rich stacking

API Reference

Property	Type	Default	Example	Description
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={partsOptions}`	Configure the appearance of the generated close Button. Toast still owns its events, dismissal semantics, and ARIA.
`id`	`string`	`—`	`id="example"`	Pass through to the DOM id when used statically. In template mode, acts as the template id activated by showToast(id).
`template`	`boolean`	`false`	`template`	Template mode: register an imperative Toast template without rendering it immediately. Supports the pattern of one Toast declaration and one trigger Button.
`as`	`"toast" \| undefined`	`—`	`as={value}`	Inline mode (v1.1.0): as="toast" finds the host parent and binds its click event to trigger Toast, following the three activation modes contract.
`positive`	`boolean`	`—`	`positive`	Semantic indicator: true uses a positive CheckCircle, false uses a Warning icon, and omission shows no built-in icon.
`variant`	`ToastVariant`	`"default"`	`variant={value}`	Appearance variant.
`size`	`ToastSize`	`"md"`	`size={value}`	Applies only to the default variant.
`position`	`ToastPosition`	`"top"`	`position={value}`	Controls the entry and exit direction; does not directly position Toast.
`onDismiss`	`() => void`	`—`	`onDismiss={(value) => { /* handle value */ }}`	Callback when the close X is clicked in the rich variant.
`children`	`Snippet`	`—`	`<Toast>Content</Toast>`	Body and leading or trailing attachments. When used independently, the caller removes the Toast after dismissal.