Snackbar Component

A versatile notification component that displays temporary messages with different types, positions, and customizable content.

Overview

The Snackbar component provides:

• Multiple notification types (success, error, warning, info)
• Flexible positioning options
• Customizable content with icons and messages
• Auto-dismiss functionality
• Manual close button
• Responsive design
• Accessibility features

When to Use

Use the Snackbar component when you need to:

• Display success messages after user actions
• Show error notifications for failed operations
• Provide warning messages for important information
• Display informational updates
• Give user feedback for form submissions
• Show temporary status updates
• Create toast-like notifications

Key Features

• Multiple Types: Support for success, error, warning, and info notifications
• Flexible Positioning: 6 different positions (top-left, top, top-right, bottom-left, bottom, bottom-right)
• Custom Content: Primary and secondary messages with optional icons
• Auto-dismiss: Configurable timeout for automatic removal (errors are persistent by default)
• Manual Control: Close button and programmatic control via composable methods
• Responsive Design: Adapts to different screen sizes
• Accessibility: ARIA labels and keyboard navigation
• Customizable Styling: Type-specific colors and themes
• Composable Integration: Works with useSnackbar composable for state management
• Per-Notification Position: Override global position settings per notification

API Reference →

View Code →

View Demo →