Alert

Molecule
Inline notification banners: info, success, warning, and destructive, plus a full-width announcement bar. For a blocking confirmation prompt, see Alert Dialog.
src/molecules/alert
View in Overlays & feedback

Playground

Every control sets a real prop of AlertProps. The JSX below updates as you go.
Props
title
string
description
string
Tone
pick one
dismissible
boolean
actions
boolean
JSX · AlertProps
<Alert
title="Glass needs Chrome or Safari"
description="Firefox falls back to solid surfaces with the same contrast."
info
/>

Variants

8 examples from src/molecules/alert/alert.md, each rendered live from its own JSX.
Success
<Alert
success
title="All set"
description="Your changes have been saved successfully."
/>
Warning
<Alert
warning
title="Action required"
description="Your trial expires in 3 days."
/>
Destructive
<Alert
destructive
title="Something went wrong"
description="Could not save your changes. Please try again."
/>
Neutral
<Alert
icon={<Icon bell />}
title="Scheduled maintenance"
description="The dashboard may be briefly unavailable on Sunday between 2:00 and 3:00 UTC."
/>
Dismissible
<Alert
info
title="Heads up"
description="Maintenance window scheduled for Sunday 2:00 UTC."
dismissible
/>
Actions
<Alert
warning
title="Action required"
description="Your trial expires in 3 days."
actions={<Button primary small>Upgrade plan</Button>}
/>
Measures come from the parent
<Column snug>
<Container xs start>
<Alert title="In an xs Container" description="The banner fills the 320px step, the measure of a short form." />
</Container>
<Alert title="Bare" description="No container of its own: the banner fills whatever parent it sits in." />
</Column>
Rich body
<Alert title="Design token renamed">
<Typography small muted>
The field underline now reads from <Typography code>--p-field-underline</Typography> instead of a raw hex value; update any local overrides before upgrading.
</Typography>
</Alert>

Anatomy

1
Container
2
Icon
3
Title
4
Description
5
Dismiss
6
Actions
Dimmed parts appear only in some states or variants.

Props

17 props on AlertProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Content
3 props
title
string
–
Content.
description
string
–
Content.
icon
ReactNode
–
The leading glyph: an element (an <Icon />, tinted to the tone's color unless it sets its own, and sized to the banner's glyph) or a single text character. Omitted, the banner draws its tone's own glyph (an info circle on info and neutral, a check on success, an alert circle on warning, a cross on destructive); null draws none.
Tone
pick one
14 props
info
boolean
false
success
boolean
false
warning
boolean
false
destructive
boolean
false
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.
announcement
boolean
false
The announcement bar: one line on the accent gradient (the accent running into the cyan series hue) in the accent's own ink, under its glow, with its action inline at the end. For page-wide news ("v4 is live"), not for a status. It is its own look, so it ignores the tone axis.
action
{ label: string; onPress?: () => void }
–
One action, as a label and a handler. On the announcement bar it sits inline at the end of the line, in the bar's ink; on the other looks it is a link Button in the actions region, before any actions.
dismissible
boolean
false
Shows a trailing dismiss control. Pressing it hides the banner out of the box (uncontrolled); pass dismissed to own that state instead.
dismissed
boolean
false
Controlled dismissal: true hides the banner. Omit to let the Alert manage it.
defaultDismissed
boolean
false
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.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
alert
button
ARIA on web
aria-live
From the docs
Inline notification banners: info, success, warning, and destructive, plus a full-width announcement bar. For a blocking confirmation prompt, see Alert Dialog.

Platform skins

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

Usage

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.
<Alert
info
title="Heads up"
description="Maintenance window scheduled for Sunday 2:00 UTC."
/>
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 banner is a soft callout: the tone's wash under a 1px edge of the tone's color, the tone's own glyph in that color, a foreground title and a muted body, from statusColors (the helper Badge and every toned surface read). The neutral banner is the quiet muted surface with an info glyph in the muted ink. Pass icon to draw another glyph (an <Icon /> takes the tone's color and the banner's 18px size), or icon={null} to draw none.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ion-soft
--ion-tx
--tx2

Related components