FORMA Docs

Toast

Brief confirmation for a completed background action.

import Toast from "@/forma/arc/toast/toast";
Base

In FORMA

  • Liegt in kit/arc/toast und ist über @/forma/arc/toast/toast erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

  • A single success confirmation, like Changes saved, controlled with local state.
  • Demos or small apps that do not need a toast queue.

When not to use

  • Use toast-stack for app-wide notifications with types, actions, updates, and stacking.
  • Use alert for persistent messages that should stay in the page flow.

Usage

import Toast from "@/forma/arc/toast/toast";

export function SavedToast() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Save</button>
      <Toast open={open} onOpenChange={setOpen} title="Changes saved" description="Synced to all devices." />
    </>
  );
}

API reference

Toast

A single swipeable notification with a drawn check, auto-dismiss, and morphing copy. Default export.

PropTypeDefaultDescription
title (required)string–Headline. Changes crossfade while shown.
descriptionstring–Supporting line.
openbooleantrueWhether the toast is shown. Setting it true again after a dismiss re-raises it.
onOpenChange(open: boolean) => void–Called with false on close, swipe, or timeout. Auto-dismiss only runs when this is provided.
durationnumber4500Milliseconds before auto-dismiss. 0 or less disables it.

Keyboard interactions

KeysAction
Tab then EnterReaches and activates the dismiss button.

Accessibility

  • Renders role="status" with aria-live="polite" and aria-atomic, so new content is announced without stealing focus.
  • The dismiss button is labelled "Dismiss notification"; the check icon is aria-hidden.
  • Positioning is up to the caller; the auto-dismiss timer does not pause on hover, so keep messages short.

Motion

  • Enters rising 16px from 0.96 scale on a morph spring while the check draws in; a swipe past 80px or 480px/s throws it off with its release velocity.
  • Closing sinks it 8px and fades. Copy changes rise in while the height springs to fit.
  • Reduced motion uses opacity fades and disables dragging.

Responsive behavior

  • The toast is min(100%, 26rem) wide and the title ellipsizes on one line.
  • Positioning is up to you; fix it to the bottom center on phones so it clears the thumb zone edges.
  • It swipes horizontally on touch and mouse; drag is disabled under reduced motion.

Performance

  • Drag and throw run on motion values, and a ResizeObserver springs the height when copy changes.
  • The auto-dismiss timer does not pause on hover, so keep messages short.

Notes for AI

  • Use for a single success confirmation you control with local state. Use toast-stack for an app-wide queue with types, actions, updates, and stacking.
  • Import as a default export. Position it yourself, for example fixed to the bottom of the viewport.

Also in messages

  • Announcement bar: A top banner that rotates messages, counts down, and collapses smoothly when dismissed.
  • Cookie consent: A consent bar that morphs into preferences and folds into a reopen button.

Guidance for AI tools

Toast: Brief confirmation for a completed background action. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückAlertWeiterRating

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.