Compare
Lookalikes
Patterns that look similar but behave differently. Pick the right one before you prompt.
Toast / Snackbar
Auto-dismiss status
Modal Dialog
Blocking decision
Toast vs Modal
Status that vanishes on its own vs a decision you must make.
Modal Dialog
Centered interrupt
Drawer / Side Sheet
Side panel, keep context
Modal vs Drawer
One decision in the center vs a side panel for longer work.
Drawer / Side Sheet
From the side · desktop-friendly
Bottom Sheet
From the bottom · phone-friendly
Drawer vs Bottom sheet
Side panel for desktop; bottom sheet for thumb reach on phones.
Skeleton Screen
Layout preview
Spinner / Activity Indicator
Indeterminate busy
Skeleton vs Spinner
Show the shape of content vs a generic “busy” indicator.
Switch / Toggle
Applies now
Checkbox & Radio
Submit later
Switch vs Checkbox
Immediate on/off vs choices collected before submit.
Tabs
Switch views
Segmented Control
Pick a mode
Tabs vs Segmented control
Views/pages vs a compact choice within one view.
Tooltip / Popover
Hover / light tap
Modal Dialog
Must handle now
Tooltip / Popover vs Modal
Lightweight explainer vs a full interrupt for decisions.
Empty State
No items
Skeleton Screen
Still loading
Empty vs Skeleton
Truly no data vs data is still loading.