v1.0.0

<bmx-avatar>

A person, drawn small.

7 properties · 0 events · 0 methods · 4 parts

Example

Two initials from two words and one from a single word: Prince as 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.
Size is --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 &mdash; 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> &mdash; 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

PropertyAttributeTypeDefaultDescription
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

SlotDescription
(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

PartDescription
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

PropertyDescription
--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.