Updated
Modal
Modal interrupts the screen with a decision that has to be made before anything else continues.
Updated
Preview
A dialog that interrupts and asks for a decision. One primary action, one secondary, a close. If the answer can wait, or there is no decision, this is the wrong component.
Three parts sit at gap 16: a 32 title row, the 140 slot and a 96 button column. The height hugs inside 24 of top padding and 20 at the sides and the bottom.
The title fills the row, and the 32 close button takes what it needs.
The Modal is a centered dialog at radius 40 on all four corners, with dropShadow/2xl under it. It fills bg/raised, white in Light and #242427 in Dark, so a dark dialog lifts off a #0E0E0F screen without a stroke.
The close is a 32 Compact Button, under the minimum touch target. Give it a 44 pt hit area on iOS and 48 dp on Android in code.
Source: Modal, node 209:1676 of the Appetite UI Figma file, read on October 2, 2026.
What goes in the Modal slot?
Anything the decision needs, such as a line of copy, a list, a form or a preview. The middle block is a native Figma slot with no fill and no content of its own, and it is the only part a decision changes.
The slot is 300 x 140 and pads its content 12 at gap 8. The pink dashes mark an empty slot in these docs, and the component does not ship them.
The buttons are a Brand Filled and a Brand Link at md, stacked, so a long label never truncates.
When should I use Modal Sheet?
Use the sheet for a focused sub-task, such as a secondary flow or a picker. It is a separate component: a page sheet on iOS and a full-screen dialog on Android.
The sheet is drawn at full size, 393 wide and 789 high. A back sheet 345 wide peeks 10 above the front one, inset 24 on each side in bg/soft-100, so a sheet that opens another reads as a stack.
The front sheet is radius 40 on its top corners, with a 48 x 5 drag handle, a header with a title, a close and a subheadline, a 496 tall slot, and two lg buttons.
The ground in the specimen is the screen under bg/scrim. The sheet is bg/white-0 and fully opaque, and the screen blurs behind it through backdropBlur/md.
Source: Modal Sheet, node 244:4922 of the Appetite UI Figma file, read on October 2, 2026.
Properties
Neither component is a variant set. Modal has two properties and Modal Sheet has four.
| Component | Property | Type | Default |
|---|---|---|---|
| Modal | Title | Text | Title of modal |
| Modal | Content Slot | Slot | empty, 300 x 140 |
| Modal Sheet | Title | Text | Title of sheet |
| Modal Sheet | Subheadline | Boolean | true |
| Modal Sheet | Subheadline Text | Text | Subheadline of sheet |
| Modal Sheet | Content Slot | Slot | empty, 353 x 496 |
The two buttons are Button instances with their own properties. A destructive dialog swaps the first to Type Error on the instance.
The close is a Compact Button at Style Transparent. A decision-free message belongs in a Toast or an Alert.
Tokens
Every value the two components read, resolved to its primitive.
| Token | Light | Dark | Applied to |
|---|---|---|---|
bg/raised | #FFFFFF | #242427 | Modal surface |
bg/white-0 | #FFFFFF | #0E0E0F | Modal Sheet front |
bg/soft-100 | #E9E9EA | #48484A | Modal Sheet back sheet |
border/sub-200 | #D1D1D6 | #48484A | Drag handle |
text/strong-950 | #0E0E0F | #FFFFFF | Titles |
text/sub-700 | #48484A | #C7C7CC | Subheadline |
fg/soft-500 | #8E8E93 | #AEAEB2 | Close glyph |
brand/base | #155DFC | #2B7FFF | Filled button, link label |
static/static-white-0 | #FFFFFF | #FFFFFF | Filled button label |
Radius 40 is dimensions/radius/4xl. The Modal casts dropShadow/2xl, the same shadow as the Action Sheet, and the Modal Sheet's fill effect is backdropBlur/md.
Padding runs on spacing/6 24, spacing/5 20, spacing/4 16 and spacing/2 8.
How does Modal differ on iOS and Material 3?
Both platforms split the job in two: a centered dialog for a decision and a sheet for a flow. Appetite UI Modal and Modal Sheet are the two halves, one pair for both platforms.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Modal | iOS / Alert, the centered decision in the Apple Platform pages | M3 / Basic dialog, 304 x 240 at radius 24, plus List dialog and Scrollable list dialog | Appetite UI Modal is 340 wide at radius 40 with a slot and stacked buttons. Material dialogs are narrower and put text buttons on one row. |
| Modal Sheet | iOS / Sheet - Full Screen in Medium, Large and Large (Stacked) detents, iOS / Sheet - Inspector and iOS / Sheet - Duo | M3 / Bottom sheet, Modal False or True, 412 wide, and M3 / Side Sheet | Appetite UI draws one 393 wide sheet with a stack peek. iOS has real detents and Material has a standard and a modal bottom sheet. |
Detents and drag behavior belong to the platform. Build the sheet with the native control, a page sheet on iOS and a full-screen dialog on Android, and take the surface, the handle and the actions from Appetite UI.
The minimum touch target is 44 pt on iOS and 48 dp on Android, set by platform/min-touch-target.
Guidelines
Do
Put the decision in the title and the verb on the button. Discard and Keep editing say what happens; OK and Cancel make the user re-read the title.
Don't
Do not ask a question the buttons cannot answer. Sure about what, and what does OK agree to?
Show one modal at a time and never open one from another. The close button and the secondary action do the same job here, so give the secondary a real label instead of a second dismiss.
Use Modal Sheet when the content is a list or a picker: a sheet is easier to reach with a thumb and easier to leave.