Feedback

Toast notifications, empty states, loading skeletons, and error states. Feedback components communicate system status to the user with appropriate urgency and microcopy.

Toast

Non-blocking notifications. Semantic color on the left border, warm shadow for float effect.

Sync complete. All changes have been saved.

Project created. Your new project is ready.

Storage limit approaching. You have used 90% of available storage.

Upload failed. The file exceeds the 10MB limit.

Message archived.

Empty State

Shown when there is nothing to display. Different copy for different contexts.

Create your first project

Projects organize your work into focused spaces. Start with one and grow from there.

First-use empty state

No results found

Try adjusting your search or filters to find what you are looking for.

No-results empty state

Couldn't load your projects

The server didn't respond. Check your connection and try again.

Error-recovery empty state

You don't have access to this project

Ask the project owner for permission, or switch to a project you own.

Permission empty state

Loading Skeleton

Placeholder shapes that indicate content is loading. Uses the shimmer animation.

TEXT LINES

CARD

AVATAR + TEXT

TABLE ROW

Error State

Different error presentations depending on scope: page-level, inline, field-level.

PAGE-LEVEL

Page not found

The page you are looking for does not exist or has been moved.

INLINE

Failed to load comments.

OFFLINE

TIMEOUT

Request timed out. The server took too long to respond. This usually resolves on its own.

TOKEN REFERENCE

Feedback components use component tokens from components.css:

--toast-radius: var(--radius-md)--toast-shadow: var(--elevation-overlay)--toast-max-width: 360px--empty-icon-size: 48px--empty-gap: var(--space-md)--skeleton-bg: var(--color-surface-tertiary)--skeleton-shine: var(--color-surface-secondary)--skeleton-duration: 1.5s