Avatar Group

Question

Display a group of user avatars with overflow count.

Accepted Answer

import './index.css'; import React from 'react'; const avatars = [ 'https://randomuser.me/api/portraits/men/32.jpg', 'https://randomuser.me/api/portraits/women/44.jpg', 'https://randomuser.me/api/portraits/men/45.jpg', 'https://randomuser.me/api/portraits/women/46.jpg', 'https://randomuser.me/api/portraits/men/47.jpg' ]; function App() { const max = 3; return (

Avatar Group

{avatars.slice(0, max).map((src, i) => (

))} {avatars.length > max && ( +{avatars.length - max} )}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .avatar-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; } .avatar-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .avatar-group { display: flex; align-items: center; gap: 0.5rem; } .avatar-img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .avatar-overflow { background: #2563eb; color: #fff; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.1rem; }