Open Collective
Open Collective
Loading
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.