Menus, popovers and tooltips
Desktop10 components37 variants4 recreations
Desktop dropdowns, submenus, context menus, popovers, tooltips, toggletips, hover cards and coachmark tours.
$9, or included with Pro
Feedback: toasts, banners, progress, loading (Desktop)
Desktop packOverlays and feedback
Desktop feedback patterns: toast stacks, page banners, messages, flags, status icons, progress bars, spinners and skeletons.
- components
- 12
- variants
- 60
- recreations
- 3
- themes
- 5
Also for mobile: Feedback: toasts, banners, progress, loading
What’s inside
12 feedback patterns for desktop apps: toast stacks, page and announcement banners, section and inline messages, flags, 8 status icons, progress bars with meters, steps and file lists, spinners, inline loading, skeletons and a top loading bar. Progress values match the drawn fill. Each page has a documentation frame, a live grid in light and dark, comfortable and compact, and a 960 x 600 page scene.
- Toast stack: one, stacked, collapsed and with pause controls
- 8 status icons, each with its own shape as well as colour
- 3 recreations of deploy toasts, repository banners and work flags
Toast stack
Free sample4 variants
- One
- Stacked
- Collapsed
- With controls
Page banner
4 variants
- Info
- Warning
- Critical
- Success
Section message
4 variants
- Info
- Warning
- Error
- Success
Inline message
4 variants
- Error
- Warning
- Success
- Info
Status flag
4 variants
- Success
- Info
- Warning
- Error
Status icons
16 variants
- Success
- Warning
- Error
- Info
- Neutral
- In progress
- Paused
- Queued
Announcement banner
3 variants
- Brand
- Inverse
- Dismissible
Progress bar
5 variants
- Determinate
- Indeterminate
- Meter
- Steps
- File list
Spinner
5 variants
- Small
- Medium
- Large
- Panel
- Over content
Inline loading
4 variants
- Active
- Finished
- Error
- Button
Skeleton
3 variants
- Page
- Table
- Text
Top loading bar
4 variants
- Starting
- Halfway
- Finishing
- Done
- Figma file
- SuperDuper Pack: Feedback: toasts, banners, progress, loading (Desktop)
- 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 Vercel, GitHub and Atlassian 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.
Deploy toasts
Recreated from Vercel
Repository banners
Recreated from GitHub
Work flags
Recreated from Atlassian
Not affiliated with, endorsed or sponsored by Vercel, GitHub and Atlassian. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the toast stack full size, free
A corner toast stack with one toast, several stacked, collapsed, and with pause controls. 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
Desktop11 components28 variants3 recreations
Desktop empty tables, first runs, no results, 404 and 500 pages, access requests, maintenance and success states.
$9, or included with Pro
Dialogs, sheets and modals
Desktop10 components35 variants4 recreations
Desktop dialogs in four sizes, confirms, form dialogs, side sheets, tearsheets, full-screen modals and scrims.
$9, or included with Pro
Questions about the feedback: toasts, banners, progress, loading pack
One Figma file: SuperDuper Pack: Feedback: toasts, banners, progress, loading (Desktop). It has 12 components with 60 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.