Alert

Inline notification banners: info, success, warning, and destructive, plus a full-width announcement bar. For a blocking confirmation prompt, see Alert Dialog.
A banner fills the parent it is given, so a column of alerts is the same measure top to bottom and a banner over a form lines up with the fields; a Container step sets the measure when the layout calls for one.
A toned banner is Dark Factory's soft panel: the tone's wash with no border, the title in the tone's color, the body in the foreground, and the icon in the tone's solid color, from statusColors (the helper Badge and every toned surface read). The neutral banner is the card with a hairline.
iOS
Android
Web
tsx
<Alert
info
icon={<Icon info size={16} />}
title="Heads up"
description="Maintenance window scheduled for Sunday 2:00 UTC."
/>
Pressing the trailing "×" (dismissible) hides the banner out of the box; onDismiss reports it, and a controlled dismissed prop hands that state to the parent instead. Action buttons are real Buttons: wire each one's onPress.

Props

Prop
Description
title
string
Content.
description
string
Content.
icon
ReactNode
A leading glyph: a single Text character, or an element (e.g. an `<Icon />`, auto-tinted to the tone's icon color unless it sets its own color).
info
boolean
Tone (pick one; omit for the neutral default).
success
boolean
Tone (pick one; omit for the neutral default).
warning
boolean
Tone (pick one; omit for the neutral default).
destructive
boolean
The danger tone. This is the name the intent axis uses across the kit (Button, AlertDialog, and every chart) and the one the design hand-off uses here too.
error
boolean
—
dismissible
boolean
Shows a trailing dismiss control. Pressing it hides the banner out of the box (uncontrolled); pass `dismissed` to own that state instead.
dismissed
boolean
Controlled dismissal: `true` hides the banner. Omit to let the Alert manage it.
defaultDismissed
boolean
Uncontrolled seed: start hidden. Rarely useful; defaults to false.
onDismiss
() => void
Fired when the dismiss control is pressed (both modes).
children
ReactNode
—
testID
string
E2E hook forwarded to the root element.
actions
ReactNode
A footer action region rendered under the body. The Alert owns the layout: it separates the actions from the description above and lays the buttons out in a row, so a call site passes the buttons directly (`actions={<Button primary small>Upgrade plan</Button>}`) with no wrapper. Pass a fragment for more than one action.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

info

Don’t
Dressing an act-now message in the neutral info tone hides the urgency; users skim past it like an FYI.
Do
Reserve info for passive, non-urgent context (notices, tips); escalate to warning or destructive when action is required.

success

Don’t
A success banner pinned with no way to dismiss it lingers as visual noise long after the action is done.
Do
Make confirmations transient: auto-dismiss or give a Dismiss control so the success state clears once acknowledged.

warning

Don’t
A warning with no specifics or next step leaves the user guessing what to fix and by when.
Do
State the consequence, the deadline, and the action: name what's wrong and give a button to resolve it.

destructive

Don’t
Using the destructive variant for non-errors cries wolf; users learn to tune out red and miss real failures.
Do
Match the variant to the severity: reserve destructive for genuine failures, success for confirmations.
← ActionPanel
AlertDialog →