Avatar<mds-avatar>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
toneenumSpecifies the color tone of the component
variantenumSpecifies the color variant of the component
iconstringSpecifies the path to the icon
initialsstringThe user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others
srcstringSpecifies the path to the image
countnumberThe user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others
Panoramica
The <mds-avatar> web component renders a compact, circular representation of a user or entity in the Magma Design System. It resolves a single visual from whichever input is provided - a profile image, textual initials, a numeric overflow count, or an icon - and falls back to a generic person glyph when nothing usable is supplied.
Semantic Behavior
Content resolution: Exactly one visual is shown at a time, so set one of src, initials, count or icon; the generic person fallback covers the empty case. Combinations do not follow one order: count hides initials and icon, initials hides icon, icon hides src, src hides initials, and count with src (or src, initials and icon together) renders an empty avatar.Deterministic identity color: When initials is set, the component derives the color from its characters, so the same person always maps to the same color and stays distinguishable from others. Any explicit variant is ignored in this case; count derives no color and keeps the variant.Image load fallback: If the src image fails to load, the avatar automatically swaps to the generic person fallback icon.Auto-fitting initials: Initials and count text scale to fit the avatar, so they stay legible across every size.Initials display: The first two characters of initials are displayed as they are, uppercased, so pass the initials (MR), not the full name. Non-alphanumeric characters are stripped only to compute the color.
Properties & Visual Configurations
The shared variant / tone ladders are defined in agents/variants.md. Note that tone is limited to the minimal set ('strong' / 'weak'), and any explicit variant is ignored whenever initials is present, since identity color takes precedence.
Other behavioral props
src is the path to a profile image; prefer it when a real photo is available. Setting icon or count as well hides it.initials carries the textual stand-in for a user when no image exists; it drives the deterministic identity color.count renders a +N overflow badge and is intended for stacked/grouped avatar scenarios rather than individual users.icon is an SVG filename slug from the Magma icon library, used when the avatar represents a non-personal entity rather than a human.