Toast

A transient notification capsule. 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.
On the web and iOS the toast is Dark Factory's pill: the same deep fill in every palette and scheme, a bold white message, a pill with no description (a long message wraps inside the capsule) and a rounder card once a description sits under the message, with the intent glyph, the action and the dismiss in inks that read on the dark fill. Android keeps the Material 3 snackbar on the same fill.
iOS
Android
Web
tsx
<AppScreen>
<ToastProvider>
<WithToast hook={useToast}>
{({ toast }) => <Button onPress={() => toast({ message: "Profile updated" })}>Show toast</Button>}
</WithToast>
</ToastProvider>
</AppScreen>
Toast is usually driven imperatively: mount a <ToastProvider> near your app root, then call the toast(...) handle from useToast() to enqueue an auto-dismissing capsule 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.)

Props

Prop
Description
message
required
string
The headline line (required).
description
string
A secondary line under the message.
action
ToastAction
A trailing action button (e.g. Undo).
success
boolean
Green success intent (icon + tint).
destructive
boolean
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.
error
boolean
—
warning
boolean
Amber warning intent (icon + tint).
info
boolean
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.

Do & Don’t

One short message

Don’t
We were unable to complete your request because the server returned an unexpected error and the operation was rolled back
Don't crowd a toast with long paragraphs or more than one action; a toast is a glance, not a dialog.
Do
Copied to clipboard
Keep a toast to one short, plain message (with an optional one-line description), and pair a destructive or success intent with the matching message.
← Tabs
AreaChart →