Modal, drawer, or separate page?
Use a modal to pause the page, a non-modal drawer to work alongside it, or a separate page for extended work.
OverlaysUI/UX patterns
When to use each pattern, implementation details, and accessibility requirements.
When should I use a drawer?
Use a side panel for contextual work. Decide explicitly whether the page stays usable while the drawer is open.
OverlaysWhen should a form show errors?
Explain constraints up front. Validate at a useful moment, then make recovery obvious.
FormsSelect menu or radio buttons?
Show manageable choices as radios. Try narrowing a long list before using a select.
FormsOne long form or multiple steps?
Split along meaningful task boundaries, not arbitrary field counts.
FormsToggle or checkbox?
Use toggles for immediate on/off settings. Use checkboxes for selections, agreements, or choices saved together.
FormsDoes this flow need a review step?
Let people check meaningful answers before committing to an important transaction.
FormsTabs or page navigation?
Use tabs for peer views in one context. Use links for distinct destinations.
NavigationWhen are breadcrumbs useful?
Show where a page belongs and offer a route to its parents.
NavigationSearch, filters, or both?
Search finds items using words or phrases. Filters narrow the collection by predefined attributes.
NavigationToast, banner, or inline message?
Match the message's placement and persistence to its importance and scope.
FeedbackSpinner, skeleton, or progress bar?
Represent what is known about progress and keep the layout stable.
FeedbackWhat should an error message say?
Explain the problem in plain language and preserve the work needed to recover.
FeedbackWhat belongs in an empty state?
Distinguish a fresh start, no matches, loading, and a failed request. They need different responses.
Data & contentPagination or infinite scroll?
Choose based on whether users need a place they can return to or a continuous feed.
Data & contentTable or cards?
Tables support comparison across shared attributes. Cards support browsing distinct items.
Data & contentAccordion or visible content?
Hide secondary detail only when users can decide what to open from the heading.
Data & contentConfirmation or undo?
Use undo for safely reversible changes. Confirm specific, irreversible consequences.
ActionsButton or link?
Links lead to resources or locations. Buttons trigger actions.
ActionsNo matching patterns
Try another term or clear the filters.