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. UNDO

Toast Manager

Lifecycle wrapper for Toast — positioning, stacking, auto-dismiss (5s default), max 5 visible. Mount once in root layout, call push() from anywhere.

INFO SUCCESS WARNING ERROR WITH ACTION CLEAR ALL

Notification Bell

Bell icon with unread badge and dropdown panel. Composes Button, Badge, Popover, and EmptyState. Click the bell to open.

WITH NOTIFICATIONS

2

EMPTY STATE

HIGH COUNT

99+

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.

NEW PROJECT

First-use empty state

No results found

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

CLEAR FILTERS

No-results empty state

Couldn't load your projects

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

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.

REQUEST ACCESS

Permission empty state

Progress

Determinate and indeterminate progress bars for sync, upload, and pipeline execution status.

UPLOADING

35%

SYNCING

72%

COMPLETE

100%

PROCESSING

Stepper

Horizontal step indicator for multi-step flows. Shows completed, active, and upcoming steps with connecting lines.

MID-FLOW

EARLY STAGE

COMPLETE

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. RETRY

OFFLINE

You are offline. Changes will sync when reconnected.

TIMEOUT

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

TOKEN REFERENCE

Feedback components use component tokens from components.css:

--toast-radius: var(--radius-md)--toast-shadow: var(--elevation-overlay)--toast-max-width: 360px--toast-manager-z: 60--toast-manager-gap: var(--space-sm)--toast-manager-padding: var(--space-lg)--toast-manager-enter-offset: 16px--notification-panel-width: 360px--notification-panel-max-height: 420px--progress-height: 8px--progress-fill: var(--color-accent)--progress-radius: var(--radius-pill)--progress-indeterminate-duration: 1.5s--stepper-dot-size: 32px--stepper-active-bg: var(--color-accent)--stepper-complete-bg: var(--color-success)--stepper-line-color: var(--color-border)--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