Feedback

Feedback: 16 designs across 4 families — Badges · Feedback · Overlays · Progress

Designs

RTL VerifiedLTR Verified Feedback

Alert Dialog

An irreversible action: cancel first, and no outside click closes it

Advanced Overlays
RTL VerifiedLTR Verified Feedback

Badge

A badge annotating a count or status on another element — shown short, announced in full with its unit, and never the name

Beginner Badges
RTL VerifiedLTR Verified Feedback

Dialog

Native dialog element: browser focus containment and an inert background

Advanced Overlays
RTL VerifiedLTR Verified Feedback

Four-level Alert Banners

Colour never carries the meaning alone — each level has an icon and a role

Intermediate Feedback
RTL VerifiedLTR Verified Feedback

Type-to-Confirm Delete

The button unlocks only when the resource name is typed exactly

Advanced Feedback
RTL VerifiedLTR Verified Feedback

First-run Empty State

A deliberate blank: explains the value and offers one step

Beginner Feedback
RTL VerifiedLTR Verified Feedback

Error with Backoff Retry

The wait doubles with each attempt, and it is capped

Advanced Feedback
RTL VerifiedLTR Verified Feedback

Inline Field Validation

An error bound to its field via aria-describedby, announced exactly once

Advanced Feedback
RTL VerifiedLTR Verified Feedback

No Results with an Exit

Shows the filters that narrowed the result and lets you drop them one by one

Intermediate Feedback
RTL VerifiedLTR Verified Feedback

Offline with a Queue

Holds what could not be sent and flushes it when the network returns

Advanced Feedback
RTL VerifiedLTR Verified Feedback

Multi-file Progress

An overall percentage weighted by size, not by file count

Advanced Feedback
RTL VerifiedLTR Verified Feedback

Loading Skeleton

Reserves the real content’s box so the page does not jump when it arrives

Intermediate Feedback
RTL VerifiedLTR Verified Feedback

Success with a Next Step

Does not stop at “done” — it gives the reference and what comes next

Intermediate Feedback
RTL VerifiedLTR Verified Feedback

Progress

A native progress bar — the element carries its own value and role, and an absent value means unknown, not zero

Beginner Progress
RTL VerifiedLTR Verified Feedback

Support Chat

Bubbles swap sides

Beginner Feedback
RTL VerifiedLTR Verified Feedback

Toasts

Slide from the correct side

Beginner Feedback