Empty States & Bottom Primary Actions (iOS)

Based on real screens from Collect, Shake Shack, Lex, Coursera, Grab, Demo, Shop, Greg, Google Gemini, Apple Wallet, Weverse, Deepstash, and Snapchat on Mobbin.

Observed patterns — empty states

The universal 4-part stack (vertically centered)

Illustration → bold headline → 1–2 line gray explanation → single CTA.

Grab: character illustration, bold "No restaurant bookings yet", gray subcopy ("Explore top dining spots in your city and make a booking instantly!"), full-width green pill "Explore dining spots".
Coursera: simple line-art book icon over a soft blue blob, "You haven't enrolled in any courses (yet)", explanation, compact blue "Explore courses" button — centered, hugging its label.
Shake Shack: brand-voice headline "Say what?! Your bag is empty." with a stick-figure illustration in brand green on black, and a full-width green "Find a Location" CTA.
Lex frames the whole empty state inside a rounded card: mascot, "No saved posts", "You haven't saved any posts yet! Your saved posts will show up here.", small green "Go to feed" button.

CTA routes to the filling action

Every observed CTA sends the user to the place where the empty collection gets filled — "Find a Location" (bag), "Explore courses" (enrollments), "Go to feed" (saved posts), "Explore dining spots" (bookings). None say generic "Get started".

FAB + coach-mark variant

Collect's board view: "Looks a little empty in here / Tap the + to get started" with an orange tooltip bubble ("Tap to add content to this board") pointing directly at the orange "+" FAB. Its My items screen repeats the pattern with a blue tooltip and FAB.
Demo: serif "Next up" headline, "To create your first project, just tap the '+' button below", coral "+" FAB centered at the bottom. When the creation control already exists on screen, the empty state teaches it rather than duplicating it.

Tone and craft

Headlines are short, human, and often optimistic ("(yet)" — Coursera; "Say what?!" — Shake Shack). Illustrations are brand-styled (mascots for Lex/Collect, brand-line-art for Shake Shack, human characters for Grab) — never generic stock clip-art. Explanations always say what will appear here.

Observed patterns — primary action at bottom of screen

Full-width anchored pill: Weverse pins a teal "Start Subscription" pill at the bottom, and it activates only after the "I have reviewed…" checkbox above it is ticked. Deepstash anchors a dark full-width "Continue" pill inside a bottom sheet. Snapchat uses a slightly inset blue pill "📎 Attach to Snap" centered above the home indicator.
Compact corner pill for contextual actions: Google Gemini puts a small blue "✓ Attach" pill bottom-right over dark content; Greg puts "Post ↑" bottom-right of a camera view; Shop ends a media toolbar with a purple "Next" pill on the right. Corner placement = "proceed with this content", full-width = "commit to this screen's single purpose".
Paired decision: Apple Wallet closes a terms sheet with "Disagree" as a gray/secondary pill on the left and "Agree" as the filled blue pill on the right — primary right, equal heights, both above the home indicator.
Buttons keep high contrast against any content behind them (blue-on-black Gemini, white-on-dark Shop) and add an icon when the verb alone is ambiguous (📎 Attach, ✓, ↑).

Design rules derived

Build empty states as: brand illustration → ≤6-word bold headline → 1–2 line gray explanation of what will live here → exactly one CTA.
Name the CTA after the filling action and route straight there ("Explore courses", not "OK" or "Get started").
If the screen already has a create control (FAB, "+"), point at it with a one-time coach-mark tooltip instead of adding a second button.
Vertically center the stack; keep the illustration under ~40% of screen height so headline + CTA never fall below the fold.
Write in the product's voice and allow warmth ("(yet)") — the empty state is a first impression, not an error.
Anchor a screen's single commit action as a full-width pill (~50–56pt tall, 16–20pt side margins) above the home-indicator safe area.
Use compact corner pills only for contextual "proceed" actions layered over content (camera, preview, media).
Gate irreversible CTAs on explicit acknowledgment (Weverse's checkbox → enabled button), and show the disabled state clearly.
In two-button decisions, put the primary filled button on the right and the secondary as gray/ghost on the left, equal height (Apple Wallet).
Guarantee button contrast over any backdrop — solid fills or a scrim, never text-only floating on imagery.

Don't

Don't stack multiple CTAs in an empty state — one action, one destination.
Don't use generic stock illustrations that ignore the brand's palette and style.
Don't phrase emptiness as failure ("Nothing found", "No data") when the state is expected for new users.
Don't float a full-width primary button over scrollable legal/reading content without a scrim or edge — it will obscure the last lines (see Apple Wallet's terms text running beneath its buttons).

Anti-patterns seen

Buttons overlapping content (Apple Wallet terms sheet): Disagree/Agree float over the final lines of the terms text with no gradient scrim — the content is partially unreadable at the decision point.
Explaining instead of doing (Demo): the empty state says "tap the '+' button below" in prose; the Collect tooltip-pointing-at-FAB version is faster to parse.
Dead-feeling blank canvases (Shop's editor): a nearly blank screen whose only guidance is a toolbar; pairing it with a first-run hint would remove the "now what?" moment.
Icon-only floating actions on busy imagery (Greg's camera overlay): small labels over a live photo need heavier scrims to stay legible.