Updated
Alert
Alert is a dialog that stops the flow to say what happened and, when it matters, what to do about it.
Updated
Preview
A centered dialog that holds the screen until it is answered. Pair it with an overlay, and dismiss the specimen from either button or the scrim.
The card is 268 tall by arithmetic: 24 of top padding, a 152 top block, 24, a 52 button block, 16. The top block holds the file's sample copy, a title over a two line message.
The card hugs, so a longer message grows it and leaves the padding and the gap alone. It enters at 200 on the emphasized curve, or on the default spring at response .40 and damping .80, the motion/dialog/enter tokens in the Motion collection.
Source: the Alert page of the Appetite UI Figma file, read on October 2, 2026.
Which types does Alert have?
Alert has four types on one axis. The status takes the type's base-500 and its own icon, and the right hand action goes red on Error and stays brand on the other three.
Success, Warning and Verified send you forward in brand blue, and only Error colors its own action. Verified is the default Type.
Error, Success and Warning draw their status as a disc in a halo. Verified draws an eight point seal in the same 64 box, a white seal carrying the halo under a state/verified/base-500 seal, with the same check on top.
What is Empty State for?
A centered placeholder for a list or a screen with nothing to show: a status icon, a title, a short body and up to two buttons. It ships in three Types and has no card around it.
Use Empty State where a list, a search or a screen has no content yet or failed to load. Say what is missing in one line and give one action that fixes it.
Info takes any icon through Icon Swap, and its default is wallet-minimal. Error and Success reuse the alert status at 80, a red x and a green check.
Show secondary turns the second button off. Success is 316 tall where Info and Error are 340, because its body is one line of 24 where theirs is two of 48.
Empty State ships 3 variants, one per Type. Source: the Empty State set of the Appetite UI Figma file, read on October 2, 2026.
Properties
Alert has one variant axis and two text properties, no boolean, no slot, no size. Empty State has one axis, two text properties, a boolean and an instance swap.
| Property | Type | Default |
|---|---|---|
Type | Variant: Verified, Error, Success, Warning | Verified |
Message | Text | Title of alert |
Alert Text | Text | A short line that explains what happened and what to do next. |
| Property | Type | Default |
|---|---|---|
Type | Variant: Info, Error, Success | Info |
Title | Text | No transactions yet |
Body | Text | Your activity will appear here once you make your first payment. |
Show secondary | Boolean | true |
Icon Swap | Instance swap, Info only | wallet-minimal |
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 left label is Dismiss on Neutral and the right label is Install on all four; only its color changes with the type. Empty State's two buttons are Brand Filled lg and Brand Weak lg, 56 tall and the full 345.
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 and ring behind the disc or the Verified seal |
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 | #FB2C36 | The disc, and the right action on Error only |
brand/base | #155DFC | #2B7FFF | The right action on the other three, and the Info glyph |
static/static-white-0 | #FFFFFF | #FFFFFF | The icon inside the disc |
state/information/lighter-50 | #EFF6FF | #2B7FFF at 16% | The Empty State Info 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.
The Alert card sits under the effect style dropShadow/2xl and the status halo under dropShadow/xs. The Empty State icons carry the same xs shadow.
How does Alert differ on iOS and Material 3?
Both platforms have a dialog of their own in the file: iOS / Alert in Liquid Glass and M3 / Basic dialog. Appetite UI Alert is one 340 wide card for both, and it adds status types that neither native dialog has.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Alert | iOS / Alert: Button Layout Stacked (300 by 443) or Side-by-Side (300 by 327), optional text fields. Regular Liquid Glass. | M3 / Basic dialog: 304 wide, 240 or 280 tall, radius 24, optional icon and divider. M3 / List dialog and Scrollable list dialog for choices. | Appetite UI has four status Types with a disc and always two Link buttons. iOS stacks three actions and holds text fields. The Platform collection gives dialogs a corner of 12 on iOS and 28 on Android (platform/dialog/corner), where Appetite UI is 24 on both. |
| Empty State | None. | None. | Neither platform ships a placeholder for an empty list, so Appetite UI draws it: 345 wide, three Types, two buttons. |
The two buttons are 44 high, which meets the minimum touch target of 44 pt on iOS and sits 4 under the 48 dp of Android, both from platform/min-touch-target in the Platform collection. The Empty State buttons are 56 high.
When should I use an Alert?
Interrupt the flow only when something needs acknowledgment: an error that blocks progress, or a confirmation before a destructive action.
Do
Dismiss on the left, the action on the right. Both are Link buttons, so neither shouts, and the color on the right is the only thing that says which way is forward.
Don't
Do not swap them. The way out sits on the left in every alert, so the same thumb movement never means two different things.
If the message can be delivered inline, deliver it inline. Use a Toast for something that passes on its own and a Modal for something that asks a question.