Toast

A short confirmation of something the person just did, near the bottom of the screen, gone by itself after five seconds.

Source: Toast.tsx — ToastProvider once at the root, useToast() anywhere. When a toast is right and when it is a banner or a badge: notifications.

When to use it

• To confirm an action whose result is not otherwise on screen: "Session logged."
• To offer Undo for something reversible: "Ana moved to Kids 2." · Undo.

Not for an error that needs a decision — a toast disappears and the decision does not; use an inline error or a banner. Not for something the screen already shows: if the row appeared, the row is the confirmation.

Anatomy

States

• Message only and with an action as drawn.
• Action pressed: opacity 0.7, then the toast dismisses and runs the action.
• In a modal: a screen presented over the tabs mounts its own <ToastHost />, or the toast paints underneath it.
• Disabled, loading, error: none. A toast is not a place for any of them.

Content

• Past tense, plain, naming what happened: "Promotion recorded."
• One line. The message wraps to two at most.
• The action is one verb: "Undo".

Accessibility

• The toast is a polite live region (accessibilityLiveRegion="polite"), so a screen reader announces it without stealing focus.
• The action is role button, labelled with its text.
• Five seconds is short for someone using a screen reader or switch control. Anything that must not be missed does not go in a toast.

Known gaps in the shipped component. The toast predates Kata: its padding, gap, height floor, action size and pressed opacity are literals rather than tokens, the message is clipped at two lines, and the dismiss time does not lengthen when it carries Undo as the notifications chapter asks. In dark the surface is near-white and the action's overlay.onBrandSoft fill — white at 15% — barely shows on it, so the action reads as plain text. Fix these in the component, not per screen.

Do and don't

Code

import { useToast } from '../../components/ui';

const { showToast } = useToast();

showToast('Ana moved to Kids 2.', {
  action: { label: 'Undo', onPress: () => moveBack(ana.id) },
});