09. Components: feedback.css
Feedback components explain state without adding noise. Use status colors only for real states. Do not use danger or error styling for routine messages.
Loading & progress
Use the spinner for short waits with no known completion point. Use a progress bar when completion can be measured or the wait may take more than a few seconds.
.la-spinner-wrap .la-spinner
.la-progress.la-progress-indeterminate
.la-progress
Empty state
Show this when a list or data set has no results. Include a clear heading, short explanation, and action when the user can create something.
.la-empty
No records yet
Create the first item or adjust your filters.
Notices
Inline notices for contextual feedback. The structure stays the same; only the variant changes. Dismiss buttons are wired by app.js.
.la-notice + variant
Toast and modal
Toasts stack at the edge of the viewport for temporary feedback. Modals block interaction until the user responds. Both use the notice structure internally.
.la-toast-stack
Demo
Toasts stack in the bottom-right corner and close automatically after 4 seconds. Use dismiss to remove one early.
.la-modal-backdrop .la-modal
Confirm action
Alerts
Page-level alerts are for significant conditions. Warning is for recoverable issues. Danger is for destructive or irreversible actions. The structure stays the same; only the variant changes. Use this sparingly.
.la-alert.la-alert-warning
Warning alert
This change may affect existing records. Review it before continuing.
.la-alert.la-alert-danger
Danger alert
Deleting this record will remove all linked data and cannot be undone.
Status dots
Small color indicators used alongside text labels. Pair with .la-status to maintain consistent alignment and gap.
.la-dot + variant
Badges and scope
Badges label a record's category or standing. Scope labels show data visibility boundaries.
.la-badge + variant
.la-scope-notice