6 min read
UI Pattern Prompts
Copy-paste prompts for implementing common UI patterns. Replace [bracketed text] with your specifics.
Empty States
Basic empty state
Add an empty state for when [list/section] has no items.
Show a friendly illustration or icon, a short message,
and a call-to-action button to add the first item.Empty state with guidance
When [data] is empty, show an empty state that explains:
- What this section is for
- Why it's currently empty
- How to add the first item
Include a prominent "Add [item]" button.Search with no results
Add a "no results" state for the search.
Show when the query returns nothing.
Include a suggestion to try different keywords.Loading States
Simple loading
Show a loading indicator while [data] is fetching.
Use a subtle spinner centered in the content area.Skeleton loading
Add skeleton loading screens for [component].
Show placeholder shapes that match the content layout.
Animate with a subtle shimmer effect.Loading with progress
Show loading progress while [file/data] uploads.
Display a progress bar and percentage.
Include a cancel button.Optimistic updates
When the user [action], immediately show the result
as if it succeeded. If the API fails, show an error
and revert to the previous state.Error States
Generic error
Show an error state when [action] fails.
Include:
- A clear error message (not technical jargon)
- A retry button
- Optionally, a help linkForm validation error
Show validation errors inline under each field.
Highlight the field with a red border.
Error text should explain how to fix the issue.Connection error
Add an offline state for when the network is unavailable.
Show a message explaining the connection issue.
Automatically retry when connection is restored.404 / Not found
Create a 404 page for when content doesn't exist.
Include a friendly message and link back to home.
Make it consistent with the rest of the design.Success Feedback
Toast notification
Show a toast notification when [action] succeeds.
It should appear at [top/bottom] of the screen,
display the message, and auto-dismiss after 3 seconds.Inline success
After [form] submits successfully, show a success
message in place of the form. Include a "Submit another"
link to reset the form.Animated confirmation
When [action] completes, show an animated checkmark.
Use a simple, satisfying animation that confirms success.
Then transition to [next state] after a brief moment.Saved indicator
Show an auto-save indicator. When changes are being
saved, show "Saving...". When saved, show "Saved"
that fades out after 2 seconds.Form Patterns
Multi-step form
Break this form into [N] steps.
Show a progress indicator at the top.
Allow going back to previous steps.
Validate each step before advancing.Inline editing
Make the [field] editable inline. Click to edit,
press Enter or click away to save.
Show a subtle edit icon on hover.Auto-complete field
Add auto-complete to the [field]. As the user types,
show matching suggestions in a dropdown.
Allow selecting with arrow keys and Enter.Dependent fields
When [field A] changes, update the options in [field B].
Show a brief loading state while fetching new options.
Clear [field B] if the selection is no longer valid.Modal & Sheet Patterns
Confirmation modal
Show a confirmation modal when the user tries to [action].
Include:
- A clear question: "Are you sure you want to [action]?"
- A description of what will happen
- Cancel and Confirm buttons
- Confirm button should be [red for destructive/primary for safe]Form in modal
Open a modal with a form for [action].
Include validation and a submit button.
Close the modal on successful submission.
Show errors inline if validation fails.Bottom sheet (mobile)
On mobile, use a bottom sheet instead of a modal for [action].
It should slide up from the bottom and be dismissible
by swiping down.Modal with steps
Create a multi-step modal for [workflow].
Show progress indicators and allow navigation
between steps. Include Cancel and final Confirm buttons.Navigation Patterns
Tab navigation
Add tab navigation between [section 1], [section 2], and [section 3].
Highlight the active tab. Content should update without page reload.Sidebar navigation
Create a sidebar with navigation links to [pages].
Highlight the current page. On mobile, collapse to
a hamburger menu.Breadcrumbs
Add breadcrumb navigation showing the path:
Home > [Section] > [Current page]
Each level should be clickable except the current page.Pagination
Add pagination to the [list]. Show:
- Page numbers with current highlighted
- Previous/Next buttons
- "X of Y" indicator
Load the new page when a page number is clicked.Lists & Collections
Sortable list
Add sorting to the [list]. Users should be able to
drag items to reorder them. Save the new order.Filterable list
Add filters for the [list]. Allow filtering by:
- [Filter 1]
- [Filter 2]
- [Filter 3]
Show the number of results. Update as filters change.Infinite scroll
Load more [items] as the user scrolls near the bottom.
Show a loading indicator while fetching.
Stop when all items are loaded.Swipe actions (mobile)
Add swipe actions to list items.
Swipe left reveals a [delete/archive] button.
Swipe right reveals [action].Selection Patterns
Multi-select
Allow selecting multiple [items] from the list.
Show checkboxes. Add a "Select all" option.
Show bulk actions when items are selected.Dropdown select
Create a dropdown for selecting [option].
Show the current selection.
Options should be [searchable/filtered] if there are many.Toggle/Switch
Add a toggle switch for [setting].
Show the current state visually.
Save immediately when toggled.What You’ll Learn
- How to implement empty states effectively
- Loading states that maintain user confidence
- Error handling that helps users recover
- Success feedback that confirms actions
- Common form and navigation patterns