Media
Avatar
Display user profile images with customizable fallback content
Completeness: styles-sufficient
The stylesheet is the whole component. There is no keyboard map beyond what the native element already does and nothing sets state at runtime that the CSS keys on, so a CSS-only port reproduces it.
Import
import { Avatar } from '@blakeui/react';Usage
JDBJR
import {Avatar} from "@blakeui/react";
export function Basic() {
return (
<div className="flex items-center gap-4">Anatomy
Import the Avatar component and access all parts using dot notation.
import { Avatar } from '@blakeui/react';
export default () => (
<Avatar>
<Avatar.Image/>
<Avatar.Fallback/>
</Avatar>
)Sizes
SMMDLG
import {Avatar} from "@blakeui/react";
export function Sizes() {
return (
<div className="flex items-center gap-4">Colors
DFACSCWRDG
import {Avatar} from "@blakeui/react";
export function Colors() {
return (
<div className="flex items-center gap-4">Variants
accent
default
success
warning
danger
letter
AG
AG
AG
AG
AG
letter soft
AG
AG
AG
AG
AG
icon
icon soft
img
A
D
S
W
D
import {Avatar, Separator} from "@blakeui/react";
import {Person} from "@gravity-ui/icons";
export function Variants() {
const colors = ["accent", "default", "success", "warning", "danger"] as const;Fallback Content
JDGB
import {Avatar} from "@blakeui/react";
import {Person} from "@gravity-ui/icons";
export function Fallback() {
return (Avatar Group
JDKWECMB
JDKWEC+2
import {Avatar} from "@blakeui/react";
const users = [
{
id: 1,Custom Styles
XLSQ
GB
ON
import {Avatar} from "@blakeui/react";
export function CustomStyles() {
return (
<div className="flex items-center gap-4">Styling
Passing Tailwind CSS classes
import { Avatar } from '@blakeui/react';
function CustomAvatar() {
return (
<Avatar className="size-20">
<Avatar.Image src="..." alt="..." />
<Avatar.Fallback>XL</Avatar.Fallback>
</Avatar>
);
}Customizing the component classes
To customize the Avatar component classes, you can use the @layer components directive.
Learn more.
A worked example is in Styling.
blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.
CSS Classes
The Avatar component uses these CSS classes (View source styles):
Base Classes
.avatar- Base container with default size (size-10).avatar__image- Image element with aspect-square sizing.avatar__fallback- Fallback container with centered content
Size Modifiers
.avatar--sm- Small avatar (size-8).avatar--md- Medium avatar (default, no additional styles).avatar--lg- Large avatar (size-12)
Variant Modifiers
.avatar--soft- Soft variant with lighter background
Color Modifiers
.avatar__fallback--default- Default text color.avatar__fallback--accent- Accent text color.avatar__fallback--success- Success text color.avatar__fallback--warning- Warning text color.avatar__fallback--danger- Danger text color
API Reference
Avatar Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Avatar size |
color | 'default' | 'accent' | 'success' | 'warning' | 'danger' | 'default' | Fallback color theme |
variant | 'default' | 'soft' | 'default' | Visual style variant |
className | string | - | Additional CSS classes |
Avatar.Image Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Image source URL |
srcSet | string | - | The image srcset attribute for responsive images |
sizes | string | - | The image sizes attribute for responsive images |
alt | string | - | Alternative text for the image |
onLoad | (event: SyntheticEvent<HTMLImageElement>) => void | - | Callback when the image loads successfully |
onError | (event: SyntheticEvent<HTMLImageElement>) => void | - | Callback when there's an error loading the image |
crossOrigin | 'anonymous' | 'use-credentials' | - | CORS setting for the image request |
loading | 'eager' | 'lazy' | - | Native lazy loading attribute |
className | string | - | Additional CSS classes |
Avatar.Fallback Props
| Prop | Type | Default | Description |
|---|---|---|---|
delayMs | number | - | Delay before showing fallback (prevents flash) |
color | 'default' | 'accent' | 'success' | 'warning' | 'danger' | - | Override color from parent |
className | string | - | Additional CSS classes |
