Accessible Astro Components v4.1.0: New Avatar & Badge Components
Published on March 14, 2025 by Mark Teekman
We're excited to announce the latest update to our Accessible Astro Components library with version 4.1.0! This release introduces powerful new components and enhances existing ones with better performance and accessibility.
🆕 New Avatar & AvatarGroup Components
The new Avatar component provides a versatile way to display user images, initials, or placeholders with optional text content:
- Supports various sizes (sm, md, lg) and shapes (round, square)
- Multiple display options: images, initials, or default icon
- Color scheme variants (default, info, success, warning, error)
- Optimized images with loading="lazy" and decoding="async" attributes
- Responsive text sizing with CSS clamp() for better readability
- Comprehensive accessibility support with conditional ARIA labels
The complementary AvatarGroup component allows for elegant grouping of multiple avatars:
- Two display modes: condensed (overlapping avatars) and grid (responsive grid layout)
- Customizable overlap amount and grid spacing
- Automatic validation to ensure proper styling in condensed mode
🔄 Badge Component Improvements
We've enhanced the Badge component with:
- Improved color consistency with fallback values for all color variables
- Better type safety and prop handling
- Enhanced accessibility for screen readers
🧰 Global Improvements
All components now consistently support:
- Spreading additional HTML attributes to the root element
- Comprehensive TypeScript definitions with detailed documentation
- Improved performance optimizations
This release continues our commitment to creating accessible, performant, and developer-friendly components for Astro projects.
- See examples on the Accessible Astro Starter website
- Checkout our Accessible Astro Docs and learn how to use these new components
- Read the full changelog on the Accessible Astro Components repository