Toast

Organism
A transient notification card. Render a <Toast> directly, or drive them imperatively: mount a <ToastProvider> near your app root and call toast(...) from the useToast() hook to enqueue auto-dismissing toasts that stack over the app.
src/organisms/toast
View in Overlays & feedback

Playground

Every control sets a real prop of ToastProps. The JSX below updates as you go.
Changes saved
Your tokens are live on every platform.
Props
message
string
description
string
Tone
pick one
brief
boolean
action
string
JSX · ToastProps
<Toast
message="Changes saved"
description="Your tokens are live on every platform."
action={{ label: "Undo", onPress: () => {} }}
/>

Variants

6 examples from src/organisms/toast/toast.md, each rendered live from its own JSX.
Your changes were saved
They are live for everyone.
Rendered directly
<Toast message="Your changes were saved" description="They are live for everyone." />
Profile updated
Success
<Toast success message="Profile updated" />
Upload failed
Destructive
<Toast destructive message="Upload failed" />
Storage almost full
Warning
<Toast warning message="Storage almost full" />
Message archived
With an action
<Toast message="Message archived" action={{ label: "Undo", onPress: () => {} }} />
A new version is available
Dismissible, informational
<Toast info message="A new version is available" onDismiss={() => {}} />

Anatomy

Changes saved
Your tokens are live on every platform.
1
Toast
2
Icon
3
Message
4
Description
5
Action
Dimmed parts appear only in some states or variants.

Props

12 props on ToastProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
12 props
brief
boolean
false
A single-line notification pill without extra chrome.
message *
string
–
The headline line (required).
description
string
–
A secondary line under the message.
action
ToastAction
–
A trailing action button (e.g. Undo).
success
boolean
false
Green success intent (icon + tint).
destructive
boolean
false
Red danger intent (icon + tint). This is the name the intent axis uses across the kit (Button, AlertDialog, and every chart) and the one the design hand-off uses.
warning
boolean
false
Amber warning intent (icon + tint).
info
boolean
false
Brand-tinted informational intent (icon + tint).
icon
ReactNode
–
Override the auto intent icon; pass any node, or omit to use the intent glyph.
onDismiss
() => void
–
When provided, render a trailing dismiss (x) that calls this.
testID
string
–
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
–
Outer layout composition only (width/flex within a parent), never a restyle hook.

Accessibility and keyboard

Keyboard
Tab
Reaches the toast action
Escape
Dismisses the focused toast
Semantics
Roles
button
status
ARIA on web
aria-live

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Upload failed
Web
control 10 · field 10 · card 16 · Instrument Sans
Upload failed
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Upload failed
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

Toast is usually driven imperatively: mount a <ToastProvider> near your app root, then call the toast(...) handle from useToast() to enqueue an auto-dismissing card that floats over the app. Press the button to fire one. (AppScreen is just this demo's stand-in for your app root, so the toast has a screen to float over.)
<AppScreen>
<ToastProvider>
<WithToast hook={useToast}>
{({ toast }) => <Button onPress={() => toast({ message: "Profile updated" })}>Show toast</Button>}
</WithToast>
</ToastProvider>
</AppScreen>
On the web and iOS the toast is a floating card: the overlay panel at the card corner, up to 380px wide, with the intent glyph in its status color (the accent's sparkle on a neutral toast), a medium message over a muted description, and the action in the accent. A brief toast hugs its one line. Android keeps the Material 3 snackbar on the inverse fill.
For a single brief notification, use <ToastProvider single brief safeArea duration={2800} bottomInset={28} horizontalInset={20}>. New messages replace the current toast and restart its lifetime. safeArea includes the device safe area. brief retains a single line without the dismiss control; Android retains its snackbar skin.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bf
--fd
--ft
--gl
--ion-tx
--ln2
--sh-lg
--tx2

Related components