Avatar
AD
import { Avatar, AvatarFallback } from "@combric/react";
export function Example() {
return <Avatar size="md"><AvatarFallback>AD</AvatarFallback></Avatar>;
}Avatar
Image and deterministic fallback composition with three published sizes.
@combric/react · v1.1.1 · Current
Import and usage
import { Avatar, AvatarImage, AvatarFallback } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Examples
Sizes
SM
MD
LG
import { Avatar, AvatarFallback } from "@combric/react";
export function Example() {
return <div style={{ display: "flex", alignItems: "flex-end", gap: "1rem" }}><Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar><Avatar size="md"><AvatarFallback>MD</AvatarFallback></Avatar><Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar></div>;
}AvatarImage
DAimport { Avatar, AvatarFallback, AvatarImage } from "@combric/react";
export function Example() {
return (
<Avatar size="lg">
<AvatarImage
src="/images/combric-avatar-example.png"
alt="Portrait of a person"
/>
<AvatarFallback>DA</AvatarFallback>
</Avatar>
);
}Public API
| Name |
|---|
Avatar |
AvatarImage |
AvatarFallback |
| Property / capability | Published contract |
|---|---|
| size | sm | md | lg |
| Contract | AvatarImage requires alt |
| Contract | AvatarFallback |
Accessibility
Preserves native image alternative text; fallback changes do not invent presence semantics.
CSS and customization
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.