--- title: Alert description: An alert stops the flow to say what happened and offers the way out. Appetite UI Figma component: four types, Empty State, tokens and platform notes. group: Components source: https://www.appetiteui.com/docs/alert dateModified: 2026-10-03 --- # Alert Updated: October 3, 2026. Alert is a dialog that stops the flow to say what happened and, when it matters, what to do about it. ## 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. Specimen: Alert, Type Error. 340 x 268, padding 24 16 16, gap 24, radius 24. 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. Specimen: Type Error, Success, Warning, Verified, in that order. 48 disc in a 56 halo, 28 icon, stroke 2.25. 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. Specimen: Empty State, Type Info, Error, Success. 345 wide, 340 and 316 tall, icon 80, gap 24. 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. - Avoid: 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. ## In the screens and the glossary - Glossary: [Action sheet](https://www.appetiteui.com/academy/glossary/action-sheet) - Glossary: [Empty state](https://www.appetiteui.com/academy/glossary/empty-state) - Screens: [Empty state screens](https://www.appetiteui.com/screens/patterns/empty-state)