Feedback
Feedback components communicate status, progress, validation outcomes, and system responses.
What this category contains
Feedback must pair icon or color with explanatory text. Field-level feedback belongs near the related control with ValidationMessage. Persistent page content uses Alert. Transient confirmations use Toast.
Status
All seven Feedback components with Figma documentation are implemented in Beta: Alert, Toast, Progress Bar, Spinner, Badge, Tooltip, and Skeleton.
Accessibility considerations
Associate inline validation with fields through aria-describedby. Use live regions intentionally — static Alerts do not announce by default.
Implemented components (7)
- Alertbeta
Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.
- Toastbeta
Toast is a transient floating notification for confirming actions or reporting short-lived events.
- Progress Barbeta
Progress Bar is determinate or indeterminate progress toward a known or unknown completion point.
- Spinnerbeta
Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage.
- Badgebeta
Badge is a compact non-interactive label for status, classification, or numeric counts at a glance.
- Tooltipbeta
Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.
- Skeletonbeta
Skeleton is temporary placeholder shapes that preserve layout while known content is loading.