<arc-avatar> Overview
Guidelines
When to use
- Always provide the name prop for accessibility, even when using an image src
- Use the sm size for compact UI like comment threads and table rows
- Use the lg size for profile headers and user detail panels
- Pair with arc-avatar-group to display collections of user avatars
- Provide a fallback-friendly name so the initial letter is meaningful (e.g., full name, not email)
When not to use
- Omit the name prop — the initial fallback and aria-label both depend on it
- Use Avatar for non-person images like logos or product icons; it is semantically a user avatar
- Set src to a very large image without server-side resizing; the component does not resize images
- Override border-radius on the avatar — the circular shape is core to the component identity
- Rely on the hover glow as a click affordance; Avatar is presentational, not interactive
Features
- Image display with object-fit: cover for consistent circular cropping
- Automatic initial-letter fallback when no src is provided
- Three size presets: sm (32px), md (40px), lg (56px)
- Hover glow effect with border-color transition and blue box-shadow
- Accessible role="img" with aria-label derived from the name property
- Exposed CSS parts: avatar, img, initials for per-instance customization
- Uppercase Tektur-font initials at weight 600 for visual consistency
Preview
Usage
<arc-avatar name="Alice Smith"></arc-avatar>
<arc-avatar name="Bob Jones" size="lg"></arc-avatar>
<arc-avatar src="https://i.pravatar.cc/150?img=1" name="User" size="sm"></arc-avatar>import { Avatar } from '@arclux/arc-ui-react';
<Avatar name="Alice Smith"></Avatar>
<Avatar name="Bob Jones" size="lg"></Avatar>
<Avatar src="https://i.pravatar.cc/150?img=1" name="User" size="sm"></Avatar><script setup>
import { Avatar } from '@arclux/arc-ui-vue';
</script>
<template>
<Avatar name="Alice Smith"></Avatar>
<Avatar name="Bob Jones" size="lg"></Avatar>
<Avatar src="https://i.pravatar.cc/150?img=1" name="User" size="sm"></Avatar>
</template><script>
import { Avatar } from '@arclux/arc-ui-svelte';
</script>
<Avatar name="Alice Smith"></Avatar>
<Avatar name="Bob Jones" size="lg"></Avatar>
<Avatar src="https://i.pravatar.cc/150?img=1" name="User" size="sm"></Avatar>import { Component } from '@angular/core';
import { Avatar } from '@arclux/arc-ui-angular';
@Component({
imports: [Avatar],
template: `
<Avatar name="Alice Smith"></Avatar>
<Avatar name="Bob Jones" size="lg"></Avatar>
<Avatar src="https://i.pravatar.cc/150?img=1" name="User" size="sm"></Avatar>
`,
})
export class MyComponent {}import { Avatar } from '@arclux/arc-ui-solid';
<Avatar name="Alice Smith"></Avatar>
<Avatar name="Bob Jones" size="lg"></Avatar>
<Avatar src="https://i.pravatar.cc/150?img=1" name="User" size="sm"></Avatar>import { Avatar } from '@arclux/arc-ui-preact';
<Avatar name="Alice Smith"></Avatar>
<Avatar name="Bob Jones" size="lg"></Avatar>
<Avatar src="https://i.pravatar.cc/150?img=1" name="User" size="sm"></Avatar><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-avatar — requires avatar.css + base.css (or arc-ui.css) -->
<span class="arc-avatar">
<div class="avatar" role="img" aria-label="Name">
</div>
</span><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-avatar — self-contained, no external CSS needed -->
<style>
.arc-avatar .avatar:hover { border-color: rgb(51, 51, 64);
box-shadow: 0 0 12px rgba(77, 126, 247, 0.15); }
</style>
<span class="arc-avatar" style="display: inline-flex">
<div class="avatar" style="display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgb(34, 34, 41); overflow: hidden; background: rgb(17, 17, 22)" role="img" aria-label="Name">
</div>
</span>API
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | '' | Image URL for the avatar. When provided, renders an `<img>` element. When empty, displays initials derived from the `name` prop. |
name | string | '' | User name used to generate initials (first letter, uppercased) and as the `alt` text / `aria-label` for the avatar. |
size | 'sm' | 'md' | 'lg' | 'md' | Controls avatar dimensions: `sm` (32px), `md` (40px), `lg` (56px). |
status | 'online' | 'offline' | 'busy' | 'away' | '' | Shows a status indicator dot. Options: 'online', 'offline', 'busy', 'away'. |
shape | 'circle' | 'square' | 'rounded' | 'circle' | Controls the avatar shape. Options: 'circle', 'square', 'rounded'. |