Dialogs, sheets and modals
Mobile14 components70 variants3 recreations
Mobile bottom sheets, alerts, modals, context menus and scrims, with detents, drag states and working prototypes.
$9, or included with Pro
Feedback: toasts, banners, progress, loading (Mobile)
Mobile packOverlays and feedback
Mobile feedback patterns: snackbars, undo toasts, banners, callouts, loading states, skeletons and progress bars and rings.
- components
- 14
- variants
- 53
- recreations
- 3
- themes
- 5
Also for desktop: Feedback: toasts, banners, progress, loading
What’s inside
14 feedback patterns for phone apps: snackbars, undo toasts, info, warning, promo and offline banners, inline callouts, full-screen and inline loading, pull to refresh, skeleton screens, and linear, segmented and ring progress. Each page has a documentation frame, a live grid in light and dark, comfortable and compact, and an in-context screen with toasts above the tab bar and banners under the nav bar.
- Undo toast with countdown, several items and undone states
- Linear, segmented and ring progress, including a meter and goal ring
- 3 recreations of mail, photo upload and music toasts
Snackbar
4 variants
- Message
- With action
- Two lines
- Error with retry
Undo toast
Free sample4 variants
- Visible
- Counting down
- Several items
- Undone
Info banner
4 variants
- Message
- With title
- With action
- Dismissible
Warning banner
3 variants
- Action needed
- Expiring
- Critical
Promo banner
3 variants
- Card
- Strip
- With image
Inline callout
5 variants
- Info
- Success
- Warning
- Danger
- Neutral
Offline banner
3 variants
- Offline
- Reconnecting
- Back online
Full-screen loading
3 variants
- Spinner
- With message
- Long wait
Inline loading
4 variants
- Button
- Row
- Status line
- Load more
Pull to refresh
4 variants
- Pulling
- Release
- Refreshing
- Updated
Skeleton screen
3 variants
- Feed
- List
- Detail
Linear progress
5 variants
- Determinate
- Indeterminate
- Upload row
- Thin bar
- Meter
Segmented progress
3 variants
- Steps
- Stories
- Chapters
Progress ring
5 variants
- Small
- Medium
- Large
- Indeterminate
- Goal
- Figma file
- SuperDuper Pack: Feedback: toasts, banners, progress, loading (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 4 UI elements and 1 screen pattern
- Toast & snackbar, Banner, Loading indicator, Progress indicator and Loading & skeleton
How Gmail, Instagram and Spotify do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Mail undo snackbar
Recreated from Gmail
Photo post upload
Recreated from Instagram
Music saved toast
Recreated from Spotify
Not affiliated with, endorsed or sponsored by Gmail, Instagram and Spotify. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the undo toast full size, free
An undo toast that is visible, counting down, covering several items, and undone. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More overlays and feedback packs
Empty, error and success states
Mobile12 components29 variants2 recreations
12 mobile empty, error and success screens, from first use and offline to update required and caught up.
$9, or included with Pro
Menus, popovers and tooltips
Mobile8 components25 variants2 recreations
Mobile action sheets, context menus, pull-downs, popovers, tooltips, coach marks, edit menus and quick actions.
$9, or included with Pro
Questions about the feedback: toasts, banners, progress, loading pack
One Figma file: SuperDuper Pack: Feedback: toasts, banners, progress, loading (Mobile). It has 14 components with 53 variants, 3 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.