Toast

Toast

// once, near the app root:
<ToastProvider />

// anywhere:
toast.success('Saved', 'Your changes are live.');
toast.error('Save failed', 'We could not reach the server.');
toast.show({ title: 'Imported 18 items', tone: 'info' });

Why a queue, not JSX?

Toasts must outlive the component that triggered them (the user might navigate away mid-fade). A central queue keeps that simple — no provider props, no portal plumbing per call site.

Install: @helixui/core

import { ToastProvider, toast } from '@helixui/core'

status: beta · since: 0.1.0

Tags: transient, notification, pop-up

Anatomy

┌─────────────────────────┐
│ ✓ Saved.                │   ← stacks bottom-right
└─────────────────────────┘

Layout

• display — fixed
• width — content
• height — content
• intrinsicSize — corner-anchored, ~360px wide
• stackable — true
• fullBleed — false

Visual

A small surface in a viewport corner, tinted by tone (success/info/warning/danger), auto-dismissing after a timeout. Stacks vertically when multiple are visible.

Props

Name	Type	Default	Description
title	string	—	Primary message. Required.
description	string	—	Optional second line.
tone	'neutral' | 'info' | 'success' | 'warning' | 'danger'	neutral	Color intent. Drives the left border color.

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.default, color.bg.action.success.default, color.bg.action.warning.default, color.bg.action.danger.default, color.border.default, color.border.focus, color.text.primary, color.text.secondary, radius.md, radius.sm, space.2, space.3, space.4, font.family.sans, font.size.sm, font.weight.semibold, shadow.md

Accessibility

Role: status

Notes

• Built on react-aria-components’ UNSTABLE_Toast queue (the only API path while toast is stabilising). Do not stack multiple <ToastProvider/> instances.
• Tones use color borders + accessible icons (caller-supplied) — never rely on color alone.
• Toasts pause on focus and pointer hover. Hovered or focused toasts will not auto-dismiss.

Composes with

Component	Relation	Note
Banner	alternative	Banner for persistent; Toast for transient.
Callout	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

save confirmation

“show a green toast saying Saved”

toast.success('Saved.')

error

“red error toast”

toast.error('Could not save.')

Related

• Callout