Learn 40 Feedback & Status concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
A brief important message that attracts attention without interrupting the current task.
Create an accessible alert with a concise type-first title, a clear explanation and next step, an icon plus text so meaning is not conveyed by color alone, and role=alert only when the message is urgent and dynamically added.Task-related feedback placed inside the content flow near the action that caused it.
Create an inline notification positioned near the related task, with informational, success, warning, and error variants, concise text, an optional dismiss control, correct polite or assertive live-region semantics, and layout that wraps cleanly on mobile.A message scoped to one page section rather than the entire application.
Create a section message attached to one clearly labelled content region, with a short heading, useful supporting text, optional action, semantic region labelling, and visual treatment that does not imply a global system problem.A prominent page-level message placed above the main content for broad-impact information.
Create a page-level notification banner before the main heading, spanning the content width, with one concise message, optional primary action, clear priority beyond color, semantic region labelling, and no more than one banner visible at a time.An urgent notice that affects most or all pages of a service.
Create a dismissible site-wide alert for service-impacting information, shown consistently at the top of every affected page, with urgency stated in words, a timestamp or expiry when relevant, a details link, persistent dismissal, and accessible announcement behavior.Persistent contextual guidance that highlights information needed to complete a task successfully.
Create a persistent informational callout placed next to the content or control it explains, with optional heading and link, informational or warning treatment, no automatic announcement or dismissal, and restrained emphasis that does not compete with task feedback.A temporary non-modal message that appears above content after an event.
Create a non-modal toast notification for short event feedback, with a concise status and message, polite live announcement, pause-on-hover and focus, sufficient display time, manual dismissal, stacking limits, and a persistent alternative for important information.A compact temporary message, usually near the bottom edge, with at most one contextual action.
Create an accessible snackbar with one short message and at most one optional action such as Undo, positioned without covering navigation or focused controls, announced politely, dismissible by time or user action, and queued rather than stacked.A notification containing one focused action that helps resolve or investigate the message.
Create an actionable notification with one clearly labelled resolution action, persistent visibility until handled or dismissed, predictable focus management, keyboard access, concise cause and next-step text, and a secondary route to the same action if the notice is later unavailable.A persistent collection where people can review recent messages and unread updates.
Create a notification center with unread count, chronological grouping, readable actor-action-object messages, mark-as-read controls, filter and empty states, deep links to affected content, keyboard navigation, and durable access to important past notifications.A specific validation message shown beside the field that needs correction.
Create a field-level error with a persistent visible label, error text that says what is wrong and how to fix it, aria-describedby association, aria-invalid state, an icon or text cue beyond color, preserved user input, and no validation before the user has had a chance to finish.A restrained confirmation that a field value has been accepted or verified.
Create restrained field-success feedback for meaningful asynchronous verification, using clear text plus an icon, polite announcement when the state changes, no unnecessary success marks on every ordinary field, and stable layout that does not shift surrounding content.A focused list of form errors placed at the top of a page after unsuccessful submission.
Create an error summary at the top of a submitted form, move focus to its descriptive heading, list links whose text explains each problem and moves focus to the matching field, retain all entered values, update the document title with Error, and also show each message beside its field.The combined error styling, messages, focus behavior, and recovery flow for a submitted form.
Create a submitted form validation state that preserves entered data, places focus on an error summary, links each summary item to an inline field error, marks invalid controls programmatically, accepts forgiving input formats, and announces changes without validating on every keystroke.A clear confirmation that a requested action completed successfully.
Create a success message that names the completed action, states any important result or next step, uses role=status for dynamically added advisory feedback, avoids relying on green alone, remains visible long enough to understand, and does not celebrate routine micro-actions excessively.A dedicated completion screen summarizing what happened and what the user should do next.
Create a confirmation page with an unmistakable success heading, reference number, summary of what was submitted, expected next steps and timing, ways to save or print the receipt, relevant navigation, and no dependence on browser history to recover the confirmation.A compact state communicating whether edits are saving, saved, or need attention.
Create an autosave status that transitions through Saving, Saved with timestamp, and Save failed states; announce meaningful changes politely, avoid a spinner that never resolves, expose a Retry action on failure, and preserve unsaved work during navigation or connectivity loss.Immediate feedback that content was successfully copied to the clipboard.
Create a copy control whose label changes briefly to Copied after success, announces the result through a polite status region, restores its original label without stealing focus, reports clipboard failure with a selectable fallback, and never claims success before the copy operation resolves.A reversible-action message that offers a short opportunity to restore a recent change.
Create feedback for a reversible action with a clear description and prominent Undo button, sufficient time to act, keyboard accessibility, polite announcement, restoration of the exact prior state, and a durable recovery route when the consequence is important.A high-priority explanation shown before an irreversible or difficult-to-recover action.
Create a destructive-action warning that names the exact object and permanent consequence, separates the danger action from Cancel, uses an alert dialog only when interruption is necessary, places initial focus safely, requires explicit confirmation for high-impact loss, and returns focus after cancellation.An animated indicator used when work is ongoing but completion cannot be estimated.
Create an indeterminate loading spinner paired with a visible task label, role=status or aria-busy on the affected region, reduced-motion support, delayed appearance for very fast tasks, timeout and error handling, and no replacement of the entire interface when only one region is updating.A content-shaped placeholder that previews layout while initial data is loading.
Create a skeleton screen that mirrors the final content structure and dimensions, is hidden from assistive technology, labels the containing region as busy, avoids fake interactive controls, respects reduced motion, prevents layout shift, and swaps atomically to real content or an error state.A blocking busy state placed over a specific region while an operation temporarily prevents interaction.
Create a loading overlay scoped only to the region that is temporarily unavailable, with a visible task label, aria-busy state, blocked pointer and keyboard interaction inside that region, preserved surrounding navigation, reduced-motion support, and guaranteed success, cancellation, timeout, and failure exits.A submit or action button that communicates its own in-progress state.
Create a loading button that changes its visible label from the action to an in-progress verb, prevents duplicate submission without removing focus, retains its width, includes a decorative spinner, announces the state change, and restores an enabled success or error state when the request finishes.A linear animation indicating ongoing work when no trustworthy percentage is available.
Create an indeterminate linear progress indicator with a visible operation label, no fabricated percentage, appropriate progressbar semantics without aria-valuenow, reduced-motion treatment, delayed appearance for brief work, and a clear transition to completion or failure.Detailed progress feedback for one or more files being transferred.
Create a file upload progress item with filename, transferred size, accurate percentage, progress semantics, pause or cancel where supported, queued, uploading, complete, and failed states, retry without reselecting the file, and an aggregate summary for multiple uploads.A progress overview showing the current position in a multi-page linear process.
Create a non-interactive step indicator for a linear multi-page process with three or more high-level steps, explicit completed, current, and pending text, aria-current on the current step, a Step X of Y heading, separate Back and Continue navigation, and a compact mobile form.Persistent progress for work that continues while the user performs other tasks.
Create a background-task status panel with task name, start time, current stage, progress when measurable, ability to leave the page safely, pause or cancel when supported, completion notification, durable failure details, and a route back to the generated result.Feedback showing when displayed data was last updated and whether a refresh is running.
Create a data refresh status with last-updated time, a labelled Refresh action, in-progress state that preserves existing content, polite completion announcement, stale-data indication, retryable failure, and protection against repeated concurrent refresh requests.A meaningful first-use or zero-data state explaining what belongs in an otherwise empty area.
Create an empty state that explains what content will appear, why none exists yet, and the most useful next action; tailor first-use and user-cleared variants, use a restrained illustration, keep actions permission-aware, and avoid treating loading or errors as empty data.A search or filter result state explaining that no items match the current criteria.
Create a no-results state that repeats the search or active filters, states that nothing matched rather than that no data exists, offers Clear filters or Edit search, preserves the query for correction, suggests useful alternatives without inventing results, and announces the updated result count.A recoverable content-area failure explaining what could not be loaded and what to do next.
Create a recoverable error state scoped to the failed content region, with plain-language cause when safe, preserved surrounding content, primary Retry action, secondary support or diagnostics path, request reference when useful, polite announcement, and no blame or raw technical stack trace.A connectivity state explaining which features remain available without a network connection.
Create an offline state that clearly states the connection loss, preserves locally available content, distinguishes read-only and queued actions, shows pending sync count, retries automatically with a manual option, announces reconnection politely, and never discards unsent work.A temporary connection-recovery state shown while the application attempts to reconnect.
Create a reconnecting state with current attempt and next-retry timing, non-blocking progress, Cancel or Retry now when useful, exponential-backoff behavior, preserved edits, polite status announcements without repeated noise, and a clear transition to Connected or Offline.A full-page response used when a service is temporarily unable to handle requests.
Create a service-unavailable page with a plain-language temporary-outage heading, honest status and expected restoration time only when known, safe Retry and status-page links, alternative contact for urgent needs, lightweight assets that work during an outage, and correct HTTP 503 handling with Retry-After where appropriate.A page-level state explaining that the requested route or resource cannot be found.
Create a helpful not-found page with a specific heading, possible reasons without exposing sensitive resource existence, links to Home and relevant navigation or search, preserved application shell, concise support guidance, and correct HTTP 404 status.An authorization state explaining that the signed-in user cannot access a resource or action.
Create a permission-denied state that distinguishes missing access from missing authentication, explains the required role without leaking sensitive data, offers Request access, Switch account, or Go back actions when valid, preserves context, and uses the correct 403 response for forbidden resources.An authentication timeout message that helps the user safely resume interrupted work.
Create a session-expired state that explains why sign-in is required again, preserves unsaved work securely where possible, provides a clear Sign in again action, returns the user to the previous task after authentication, avoids revealing protected data, and warns shortly before predictable expiry.A temporary restriction explaining that too many requests were made and when to retry.
Create a rate-limit state that states the temporary limit in plain language, shows a trustworthy retry time or remaining quota, disables repeated requests until allowed, preserves user input, offers plan or support details only when relevant, and follows HTTP 429 and Retry-After semantics.A persistent state showing whether local and remote data are synchronized.
Create a sync status with Synced, Syncing, Offline changes, Conflict, and Failed states; include last successful sync time, pending item count, non-color icons and text, polite announcements for meaningful transitions, manual Retry, and conflict resolution that never silently overwrites data.