Examples
Basic
Both PF flavours: an <img> with an image source (here an inline SVG silhouette; in
production point it at a real user-image URL), and a <div role="img"> holding
custom content — any inline SVG or icon.
Bordered
Add pf-m-bordered for a hairline ring on non-colorful avatars (colorful ones include
their own border) — useful to distinguish stacked or overlapping avatars. Shown PF-6.6-style on a div avatar with an
icon; the same modifier on the <img> flavour appears in
Bordered sizes.
Sizes
All four size modifiers — pf-m-sm, pf-m-md (default),
pf-m-lg, pf-m-xl — shown PF-6.6-style on colorful red
avatars with the initial "C". The same modifiers apply to the <img> flavour; see
Bordered sizes.
Bordered sizes
The four sizes on the <img> flavour with
pf-m-bordered — the border thickness scales subtly with size.
Initials
The common fallback for users without a profile photo — a div avatar with the initials in a
__initials span. Pass a single initial so the text fits. Works bordered or with any of
the nine color modifiers.
Colors
Color modifiers (PatternFly 6.6+): pf-m-colorful plus one of nine color classes, on a
<div role="img"> holding an icon or initials — the border comes automatically. The
Avatar model renders this via its colorful anatomy; param mode stays the plain
<img> flavour.
Documentation
Avatar props
Parameters accepted by
{#include components/data-display/avatar ... /}. Model mode: pass
avatar=<Avatar> built in Java instead — the Java tab on each example shows the
builder.
| Name | Type | Default | Description |
|---|---|---|---|
* id
|
String | — | DOM id on the <img> element. |
* src
|
String (URL) | — | Image source. Accepts any URL the browser can render — http(s)://, relative paths, data URIs, blob URLs. |
* alt
|
String | — |
Accessible alternative text. For named avatars use the person's name (e.g.
"Jane Doe"); for decorative use an empty string.
|
size
|
sm | md | lg | xl
|
md (implicit)
|
Size modifier — emits pf-m-{size}. Omit for the default medium size.
|
bordered
|
boolean |
false
|
Adds pf-m-bordered for a ring around the image. PF React's
isBordered.
|
Divergence from PF React. We skip className (React-specific). Our
bordered is PF's isBordered — same semantic, shorter name.
We do not validate the URL or fall back when the image fails to load — pair with a server-side default or an
onerror handler if you need a placeholder.
Usage
Pick a size. Use sm in dense table rows and inline mentions;
md (default) in masthead and nav bars; lg on profile
cards; xl only on dedicated profile pages.
Always name the avatar. Image avatars require alt; div avatars require
role="img" plus aria-label (mark inner content
aria-hidden="true"). Use the person's name when known, or an empty
alt for purely decorative image cases.
Initials fallback. For users without a photo, render the div flavour with an
__initials span — bordered or colorful. In param mode the runtime template is the
<img> flavour only; the Avatar model renders initials directly — see the
Initials example.
Failed-load fallback. PatternFly's CSS has no built-in placeholder for broken
src. Either serve a default image from the backend or attach an
onerror handler that swaps in a known-good URL.
Stacking. The bordered variant exists specifically to make adjacent avatars (e.g. a group-chat
header) visually distinct — set bordered=true and negative-margin them together with a
container.