Design patterns
Solve the problem once.
21 recurring UX problems, the components that solve them, how to build them and what to avoid. Every example is live.
Loading without layout shift
Skeleton · Spinner · ProgressBar
Reserve the final size while data loads, so nothing jumps when it arrives and screen readers know the region is busy.
Anatomy, code and accessibility →DoReserve the final size with Skeleton and set aria-busy on the region that loads.
Don'tSwap a spinner for content of a different height.
Destructive actions
Dialog · Button · Toast
Confirm only what can't be undone, name the thing being destroyed, and make the safe choice the easy one.
Anatomy, code and accessibility →DoName the thing being deleted in the title and on the button.
Don'tAsk “Are you sure?” with OK and Cancel.
Filters that stay out of the way
FilterChip · Drawer · CheckboxField · MenuItem
Show active filters as chips above the results, so people can see and undo what's narrowing the list.
3 filters active
Anatomy, code and accessibility →DoShow active filters as chips you can turn off above the results.
Don'tHide the active filter count inside a closed drawer.
Forms that forgive
Input · InputPhone · PasswordStrength · Textarea · Alert
Validate at the right moment, explain how to fix each error next to the field, and never throw away what someone typed.
We send payslips here.Enter a full email address, like sara@northwind.ioAnatomy, code and accessibility →DoSay what is wrong and how to fix it, next to the field.
Don'tClear the field when the value is wrong.
Empty states that teach
EmptyState · Button
Use the empty screen to explain what will appear and to offer the first action, not to say “No data”.
No leave requests yet
New requests from your team appear here.Anatomy, code and accessibility →DoExplain what will appear here and offer the first action.
Don'tShow “No data” and nothing else.
Right-to-left by default
Breadcrumb · BreadcrumbItem · Pagination · Sidebar
Build with logical properties and a locale, and the whole layout mirrors for Arabic, Hebrew, Persian and Urdu.
Anatomy, code and accessibility →DoPass an RTL locale and let logical properties flip the layout.
Don'tMirror icons that mean time or media playback.
Feedback after an action
Toast · Alert · Button
Confirm every action where it happened, briefly, and offer Undo instead of asking for confirmation first.
- Payslip for September
- Team offsite agenda
Anatomy, code and accessibility →DoAct immediately and offer Undo.
Don'tAsk “Archive this message?” first.
Bulk actions
BulkActionBar · Checkbox · Button · Dialog
Let people select many rows and act on them at once, with a clear count and an easy way to clear the selection.
2 selected- Sara Khan
- Ayesha Malik
- Ahmed Raza
- Omar Siddiqui
Anatomy, code and accessibility →DoShow exactly how many items an action will touch.
Don'tLet “Select all” silently include rows on other pages.
Errors you can recover from
Alert · Banner · Button · Toast
When something fails, say what failed, keep what still works, and offer the next step, usually Retry.
Error: Couldn't load leave balancesCheck your connection and try again. Your requests are saved.Anatomy, code and accessibility →DoSay what failed and offer Retry, next to the part that failed.
Don'tReplace the whole page with “Something went wrong”.
Multi-step flows
Stepper · ProgressSteps · Button · Alert
Split long tasks into named steps, show where people are, and let them go back without losing anything.
- DatesDone
- ApproverIn progress
- ReviewUp next
Anatomy, code and accessibility →DoName every step and show how many are left.
Don'tShow “Next” with no idea how far there is to go.
Search that answers
SearchField · EmptyState · CommandPalette · Button
Filter as people type, show what matched, and turn an empty result into a next step.
1 person matches
- Sara Khan
Anatomy, code and accessibility →DoFilter as people type and show the count.
Don'tWait for Enter, then reload the page.
Progressive disclosure
AccordionItem · Popover · Tooltip · Drawer
Show the few things most people need, and keep the rest one press away, clearly labelled.
You earn 1.67 days of annual leave each month. Unused days above 10 expire on 31 March.Anatomy, code and accessibility →DoLabel what's hidden: “Show 4 advanced settings”.
Don'tHide options behind a “…” with no label.
Choosing a selection control
Checkbox · CheckboxField · CheckboxCard · RadioGroup · RadioField · RadioCard · SwitchField · SegmentedControl · Select · Combobox
Pick the control from three questions: one choice or many, how many options, and does it apply now or on submit.
Leave typeAnatomy, code and accessibility →DoShow 2 to 6 options as radios so people can compare them at a glance.
Don'tHide two options inside a Select.
Choosing the right overlay
Tooltip · Popover · Dialog · Modal · Drawer · BottomSheet · ActionSheet
Match the overlay to the job: a tooltip names, a popover explains, a dialog asks, a modal or drawer holds a task.
A tooltip names, a popover explains, a drawer holds details.
Anatomy, code and accessibility →DoUse a Drawer for details so people keep their place in the list.
Don'tOpen a modal on top of a modal.
The right place for a message
Input · Alert · Banner · Toast · EmptyState
Put each message as close as possible to what it's about, and make it last as long as the problem does.
Enter a full email address, like sara@northwind.ioAnatomy, code and accessibility →DoShow a field error under the field, until it's fixed.
Don'tShow “Email is invalid” in a toast that disappears.
Data tables people can scan
TableHeaderCell · TableCell · TableToolbar · TableFooter · EmptyState · IconButton
Align numbers on the end, let people sort the columns they compare, and name every row so each cell makes sense on its own.
Employee Team Days left Ahmed RazaEngineering3Omar SiddiquiSales8Sara KhanDesign14Ayesha MalikFinance21Anatomy, code and accessibility →DoEnd-align numbers and use tabular figures so the digits line up.
Don'tCentre numbers, or align them to the start.
Settings that save themselves
SwitchField · Tab · Input · Button · Toast
Apply simple on/off settings the moment they change and confirm with a toast; save groups of related fields with one button.
Anatomy, code and accessibility →DoApply switches immediately and confirm with a short toast.
Don'tMake people press Save after flipping a switch.
Navigation that shows where you are
Sidebar · SidebarItem · Breadcrumb · BreadcrumbItem · Tab · TopAppBar · NavigationBar · NavItem
Mark the current page in every navigation level, so people always know where they are and how to go back.
Overview for Sara Khan.Anatomy, code and accessibility →DoHighlight the current section on deep pages too.
Don'tLose the highlight as soon as people open a record.
Dashboards that answer a question
MetricCard · DeltaBadge · Sparkline · LineChart · ChartState
Start from the question people bring to the screen, lead with 3 to 5 numbers that answer it, and give each one its context.
Is my team covered next week?
People in18 of 22-2 Decrease, badvs this weekOpen requests42 need you todayAnatomy, code and accessibility →DoLead with the question and the 3 to 5 numbers that answer it.
Don'tShow every metric the system tracks, in equal-sized cards.
Pagination or infinite scroll
Pagination · TableFooter · CursorPager · FeedStatus · JumpToPage
Use page numbers for records people come back to, a previous and next pair for data that moves, and a feed for browsing.
Anatomy, code and accessibility →DoUse page numbers for tables and keep the page in the URL.
Don'tInfinite-scroll a table people need to reference.
Touch-first mobile screens
TopAppBar · NavigationBar · NavItem · FAB · BottomSheet · ActionSheet
Put the main actions within reach of the thumb, make every target at least 44 px, and use sheets instead of centred dialogs.
Leave
LeaveAnatomy, code and accessibility →DoPut navigation and the main action at the bottom, within thumb reach.
Don'tPut the only Save button in the top corner.