Feedback Components

Feedback components communicate system status, provide contextual information, and guide users through their interactions. Our feedback system emphasizes clarity, appropriate timing, and helpful messaging.

Core Principles

1. Clear Communication

Feedback messages use plain language and appropriate visual indicators to ensure users understand what’s happening, what went wrong, or what they need to do next.

2. Contextual Relevance

Feedback appears where and when users need it, whether that’s inline validation, hover tooltips, or system-wide alerts. The placement and timing respect user flow.

3. Graceful Error Handling

When things go wrong, our components provide helpful recovery paths rather than dead ends. Error messages explain the problem and suggest solutions.

Component Overview

Semantic Alerts

Display important messages with semantic meaning (error, success, warning, info). Supports icons, custom styling, and proper ARIA roles for accessibility.

Use when:

• Confirming successful actions
• Warning about potential issues
• Displaying error messages
• Providing informational updates

Tooltips

Show contextual help or additional information on hover or focus. Supports multiple positioning options and multiline content.

Use when:

• Explaining interface elements
• Providing keyboard shortcuts
• Showing additional context without cluttering the UI
• Displaying validation hints

Empty States

Guide users when no content is available, whether due to filters, searches, or initial states. Includes customizable icons, messages, and action prompts.

Use when:

• No search results found
• Empty data sets or lists
• First-time user experiences
• Filtered views with no matches

Error Boundaries

Catch and handle component errors gracefully, preventing entire page crashes. Provides fallback UI and recovery options.

Use when:

• Wrapping potentially unstable components
• Protecting critical user paths
• Implementing progressive enhancement
• Handling third-party integrations

Semantic Messages

Inline feedback messages for form fields and interactive elements. Lighter weight than alerts, perfect for contextual feedback.

Use when:

• Form field validation
• Inline status updates
• Contextual hints
• Progress indicators

Design Patterns

Timing and Duration

• Immediate feedback for user actions (less than 100ms)
• Loading states for operations exceeding 1 second
• Auto-dismiss for non-critical success messages (5-7 seconds)
• Persistent display for errors requiring user action

Visual Hierarchy

• Color coding follows semantic meaning consistently
• Icons reinforce message type without being redundant
• Typography uses appropriate weights for emphasis
• Spacing creates clear separation from content

Progressive Disclosure

• Start with essential information
• Provide “Learn more” options for details
• Use expandable sections for lengthy explanations
• Maintain context while drilling down

Accessibility Considerations

Screen Reader Support

• Proper ARIA roles (alert, status, tooltip)
• Live regions for dynamic updates
• Descriptive labels for icon-only elements
• Clear focus management

Keyboard Navigation

• All interactive elements keyboard accessible
• Escape key dismisses overlays
• Tab order follows visual hierarchy
• Focus trapping where appropriate

Color and Contrast

• Never rely solely on color
• Maintain WCAG AA contrast ratios
• Provide text alternatives for icons
• Support high contrast modes

Best Practices

Writing Feedback Messages

Do:

• Use clear, concise language
• Provide actionable next steps
• Match tone to severity
• Include relevant details

Don’t:

• Use technical jargon
• Blame the user
• Show system internals
• Create alarm unnecessarily

Choosing Components

Implementation

All feedback components are built with:

• Svelte 5 composition patterns
• TypeScript for type safety
• CSS variables for theming
• ARIA attributes for accessibility

Ready to explore? Check out each component’s detailed documentation for implementation examples and API references.