Skip to content
Dark

Alert

Alert is an inline message that says what happened and, when it matters, what to do about it.

Preview

An inline status message bound to a region of the screen. Not a dialog, which asks a question, and not a toast, which passes on its own. Pair it with an overlay. Dismiss it from either button or the scrim, then bring it back.

Alert, Type Error
340 x 288, padding 24 16 16, gap 24, radius 24
Update available
Error, success, and warning variants with dismiss and primary actions. Pair with an overlay to block interaction.

288 is arithmetic, not a setting: 24 of top padding, a 172 icon block, 24, a 52 button block, 16. The card hugs, so a longer message grows it and leaves the padding and the gap alone. In and out both run 200 on the emphasized curve, the dialog preset from Motion foundations; the file names no dialog exit.

Type

One axis, four values. The disc takes the type's base-500, the icon changes with it, and the right hand action follows: Error goes red, the other three stay brand. Size, copy and layout hold.

Type Error, Success, Warning, Verified, in that order
48 disc in a 56 halo, 28 icon, stroke 2.25
Update available
Error, success, and warning variants with dismiss and primary actions. Pair with an overlay to block interaction.
DismissInstall
Update available
Error, success, and warning variants with dismiss and primary actions. Pair with an overlay to block interaction.
DismissInstall
Update available
Error, success, and warning variants with dismiss and primary actions. Pair with an overlay to block interaction.
DismissInstall
Update available
Error, success, and warning variants with dismiss and primary actions. Pair with an overlay to block interaction.
DismissInstall

Warning and Verified send you forward in brand blue, only Error colours its own action. That asymmetry is in the file, not a choice made here. One thing the docs do not reproduce: Verified's mark is not a disc in the file. Node 125:609 draws two vectors at 54.34 and 46.34 where the other three carry a 56 and a 48 ellipse. Drawn here as a disc and flagged, not redrawn from a path nobody read.

Properties

One variant axis and two text properties. No boolean, no slot, no size.

Property
Type
Default
Type
Error | Success | Warning | Verified
Error
Message
Text
Update available
Alert Text
Text
Set in the file

Alert ships 4 variants, one per type. The two actions are Button instances at Size md Style Link, so their type, size and state live on Button. The right hand label is Install on all four; only its colour changes with the type.

Tokens

Every value the component reads, resolved through its aliases to the primitive underneath.

Token
Light
Dark
Applied to
bg/white-0
#FFFFFF
#0E0E0F
Card fill and the halo behind the disc
border/soft-100
#E9E9EA
#2F2F31
The 1px inside edge and the divider
text/strong-950
#0E0E0F
#FFFFFF
Title
text/sub-700
#48484A
#C7C7CC
Body and the Dismiss label
state/error/base-500
#FB2C36
#E7000B
The disc, and the right action on Error only
brand/base
#155DFC
#2B7FFF
The right action on the other three
static/static-white-0
#FFFFFF
#FFFFFF
The icon inside the disc

Success is #22C55E then #16A34A, Warning #FF6900 then #F54900, Verified #47C2FF then #35ADE9. Radius is dimensions/radius/2xl at 24 on the card and full on the disc and both buttons.

Guidelines

Do
DismissDelete

Dismiss on the left, the action on the right. Both are Link buttons, so neither shouts, and the colour on the right is the only thing that says which way is forward.

Don't
DeleteDismiss

Do not swap them. The way out sits on the left in every alert, so the same thumb movement never means two different things.

An alert waits. Something that passes on its own is a Toast, and something that asks a question is a Modal.