Feedback Components
Progress bars, spinners, tooltips, and toast notifications for user feedback.
Progress Bars
Visual indicators for task completion and loading states.
Basic Progress Bar
Progress Colors
Colored Progress Bars
Progress Sizes
Progress Bar Sizes
Spinners
Animated loading indicators for asynchronous operations.
Spinner in Button
Loading Button
Tooltips
Contextual information that appears on hover.
Basic Tooltip
This is a tooltip!
Additional information here
Tooltip Positions
Tooltip Positioning
Tooltip on top
Tooltip on bottom
Toast Notifications
Temporary notification messages that appear in a fixed position.
Toast Examples
Success!Your changes have been saved.
Error!Failed to upload file.
Warning!Your session will expire soon.
InfoNew update available.
Common Patterns
File Upload Progress
Upload Progress Card
Uploading file...
document.pdf
Loading State
Loading Placeholder
Loading...
Please wait while we fetch your data
Accessibility
Best Practices:- Use
role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax - Add
aria-live="polite" to toast notifications - Use
aria-label or aria-describedby for spinners - Ensure tooltips are keyboard accessible
- Provide visual alternatives to spinners for screen readers
- Don't rely on color alone for progress indicators
