Avatar

Donnez à un avatar un name et aucun src : il affiche les initiales plutôt qu’une image cassée. C’est le repli utile pour une liste de contributeurs où seules certaines personnes ont une photo.

Avatar de base

ALGHAT

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Ada Lovelace' }),
  avatar({ name: 'Grace Hopper' }),
  avatar({ name: 'Alan Turing' }),
)

Avec une image

Quand src est défini, alt retombe sur le nom — un avatar n’est donc jamais une image sans libellé.

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ src: '/logo.svg', alt: 'sitelo', style: 'background: var(--su-surface-2)' }),
  avatar({ src: '/logo.svg', name: 'sitelo', square: true, style: 'background: var(--su-surface-2)' }),
)

Tailles

La taille du texte suit celle de l’avatar : les initiales restent proportionnées.

PUMUGU

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Petit Un', size: 'sm' }),
  avatar({ name: 'Moyen Un', size: 'md' }),
  avatar({ name: 'Grand Un', size: 'lg' }),
)

Carré

PAPB

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Projet A', square: true }),
  avatar({ name: 'Projet B', square: true, color: 'success' }),
)

Couleurs

Un avatar sans image prend un fond doux de la palette.

PNSWD

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  avatar({ name: 'Primary', color: 'primary' }),
  avatar({ name: 'Neutral', color: 'neutral' }),
  avatar({ name: 'Success', color: 'success' }),
  avatar({ name: 'Warning', color: 'warning' }),
  avatar({ name: 'Danger', color: 'danger' }),
)

Icônes et autres contenus

Les enfants remplacent les initiales, pour une icône ou un seul caractère.

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ color: 'neutral' },
    icon('user'),
  ),
  avatar({ color: 'primary' }, '?'),
)

Groupes

avatarGroup() superpose ses enfants et replie tout ce qui dépasse max en un compteur.

ALGHAT

ALGHAT+3

ALGH+1

stack({ gap: 'md' },
  avatarGroup(
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
  ),
  avatarGroup({ max: 3 },
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
    avatar({ name: 'Katherine Johnson' }),
    avatar({ name: 'Barbara Liskov' }),
    avatar({ name: 'Margaret Hamilton' }),
  ),
  avatarGroup({ max: 2, size: 'sm' },
    avatar({ name: 'Ada Lovelace', size: 'sm' }),
    avatar({ name: 'Grace Hopper', size: 'sm' }),
    avatar({ name: 'Alan Turing', size: 'sm' }),
  ),
)

Dans une liste

AL
Ada Lovelace
A poussé 3 commits sur main
GH
Grace Hopper
A ouvert une pull request

list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'A poussé 3 commits sur main',
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'A ouvert une pull request',
  }),
)

Props

Prop	Type	Défaut	Description
`name`	`string`	—	Sert aux initiales, au title et de repli pour l’alt de l’image.
`src`	`string`	—	Image à afficher à la place des initiales.
`alt`	`string`	—	Texte alternatif de l’image ; retombe sur name.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Diamètre, et taille de texte des initiales.
`square`	`boolean`	`false`	Rectangle arrondi au lieu d’un cercle.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Palette du fond des initiales.

avatarGroup() prend max — combien en montrer avant de replier le reste en un compteur — et size, qui ne sert qu’à ce compteur.