<bmx-avatar>
A person, drawn small.
7 properties · 0 events · 0 methods · 4 parts
Example
PR reads as
two names, and a name written in a script without spaces is one word by definition. The tint is derived from the
name, so the same person is the same colour on every page — and a filtered list does not change colour on
every keystroke, which is what a random tint does.
--bmx-avatar-size rather than a property with three names in it, so a customer who needs 34px
between your medium and your large does not have to fork the component. The corner slot takes a
bmx-badge and mirrors under RTL.
AL is never read out. Initials are an abbreviation the layout asked for, exactly as
99+ is on a badge, so the letters are drawn aria-hidden and the accessible name is the
whole name. Beside a name that is already written on the page, set decorative — otherwise every
row of a list is read twice.
Show markup
<div class="row" style="gap: 1rem; align-items: center">
<bmx-avatar name="Amara Okonkwo"></bmx-avatar>
<bmx-avatar name="Grace Hopper"></bmx-avatar>
<bmx-avatar name="Prince"></bmx-avatar>
<bmx-avatar name="张伟"></bmx-avatar>
<bmx-avatar name="محمد علي"></bmx-avatar>
<bmx-avatar></bmx-avatar>
</div>
<div class="row" style="margin-block-start: 1.5rem">
<span class="note">
Two initials from two words and <strong>one</strong> from a single word: <em>Prince</em> as <code>PR</code> reads as
two names, and a name written in a script without spaces is one word by definition. The tint is derived from the
name, so the same person is the same colour on every page — and a filtered list does not change colour on
every keystroke, which is what a random tint does.
</span>
</div>
<div class="row" style="margin-block-start: 1rem; gap: 1rem; align-items: center">
<bmx-avatar name="Dana Scott" shape="square"></bmx-avatar>
<bmx-avatar name="Eli Cohen" style="--bmx-avatar-size: 3.5rem"></bmx-avatar>
<bmx-avatar name="Priya Raman">
<bmx-badge slot="badge" dot tone="success" label="Online"></bmx-badge>
</bmx-avatar>
<span class="note" style="flex: 1 1 18rem">
Size is <code>--bmx-avatar-size</code> rather than a property with three names in it, so a customer who needs 34px
between your medium and your large does not have to fork the component. The corner slot takes a
<code>bmx-badge</code> and mirrors under RTL.
</span>
</div>
<div class="row" style="margin-block-start: 1rem">
<span class="note">
<strong><code>AL</code> is never read out.</strong> Initials are an abbreviation the layout asked for, exactly as
<code>99+</code> is on a badge, so the letters are drawn <code>aria-hidden</code> and the accessible name is the
whole name. Beside a name that is already written on the page, set <code>decorative</code> — otherwise every
row of a list is read twice.
</span>
</div>
<bmx-avatar name="Ada Lovelace" src="/people/ada.jpg"></bmx-avatar>
<bmx-avatar name="Grace Hopper"></bmx-avatar>
WHAT THIS COMPONENT IS ACTUALLY FOR
It is an image that is usually not there. In most applications most people
have never uploaded one, so the initials are not a fallback being handled
politely - they are how the component normally looks, and the photograph is
the exception. The tint behind them comes from the name, so the same person
is the same colour on every page and the eye learns them; it is derived
rather than random because a random one changes on every render and again
between a server pass and the browser's. See src/core/avatar.ts.
"AL" IS A TRUNCATION, AND IS NOT READ OUT
Initials are an abbreviation the layout asked for, in exactly the way
99+ is on a badge, and they get the same treatment: the letters are drawn
aria-hidden and the accessible name is the whole name. A screen reader
that says "A L" has been handed a compromise that never applied to it.
DECORATIVE OR NOT IS THE CONSUMER'S CALL, BECAUSE ONLY THEY CAN SEE THE ROW
An avatar beside a name that is already written on the page is decoration,
and announcing it means every row of a list is read twice. An avatar on its
own - in a stack, in a table cell, as the only thing identifying who
commented - is the identification, and hiding it loses the person entirely.
The component cannot see which it is, so decorative is a property and the
documentation says which way to set it. It is false by default, because a
name said twice is a nuisance and a name never said is a barrier.
A name is not automatically an announcement, though: with no name and no
alt there is nothing to say, and the avatar is silent whatever
decorative says. An anonymous glyph announced as "image" is noise.
NO size PROPERTY
Size is continuous, so it is --bmx-avatar-size rather than a property with
three names in it - a customer who needs 34px between your medium and your
large should not have to fork the component to get it. Same rule as the rest
of the library; see the conventions in the handover.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
alt |
alt |
string |
— | What the image is announced as, when it should not be the name. Rarely needed: an avatar is a picture of the person named beside it, so the name is the right text almost always. |
decorative |
decorative |
boolean |
false |
Hide the avatar from assistive technology. Set it when the person's name is already written beside the picture, which is most lists. See the note above - this is the one decision here that the component genuinely cannot make for the consumer. |
loading |
loading |
'lazy' | 'eager' |
'lazy' |
Whether the browser may defer loading the photograph. |
name |
name |
string |
— | The person's name. The initials, the tint and the announcement all come from it. |
seed |
seed |
string |
— | What the tint is derived from, when it should not be the display name. A user id is the better seed in any application where people can rename themselves: name changes when somebody marries and their colour changes with it, which is exactly the thing a derived colour was supposed to stop. |
shape |
shape |
BmxAvatarShape |
'circle' |
A circle, or a rounded square. |
src |
src |
string |
— | A photograph. Falls back to the initials if it fails to load. |
Slots
| Slot | Description |
|---|---|
(default) |
A custom fallback, used in place of the anonymous glyph. |
badge |
A bmx-badge pinned to the corner: presence, a count, a state. |
CSS shadow parts
| Part | Description |
|---|---|
badge |
The corner the badge slot sits in. |
icon |
The anonymous glyph, when there is not even a name. |
image |
The photograph. |
initials |
The letters drawn when there is no photograph. |
CSS custom properties
| Property | Description |
|---|---|
--bmx-avatar-color |
The fallback background, overriding the derived tint. |
--bmx-avatar-font-size |
The initials, relative to the avatar by default. |
--bmx-avatar-font-weight |
How heavy the initials are. |
--bmx-avatar-radius |
The corner radius in square shape. |
--bmx-avatar-ring |
The ring drawn round the edge. none removes it. |
--bmx-avatar-size |
The diameter, or the side of the square. |
--bmx-avatar-text |
The colour of the initials and the glyph. |
--bmx-avatar-tone-0 |
The first tint of the derived palette. |
--bmx-avatar-tone-1 |
The second. |
--bmx-avatar-tone-2 |
The third. |
--bmx-avatar-tone-3 |
The fourth. |
--bmx-avatar-tone-4 |
The fifth. |
--bmx-avatar-tone-5 |
The sixth. |
--bmx-avatar-tone-6 |
The seventh. |
--bmx-avatar-tone-7 |
The eighth. |