Composant · Divers

Avatar

Stable

Vignette d'identité : initiales dérivées du nom sur fond coloré, ou photo si une source est fournie. Quatre tailles et deux formes.

Exemples

Initiales colorées

Voir le code (Svelte)

<Avatar name="Ada Lovelace" tone="category1" />
<Avatar name="Grace Hopper" tone="category3" />
<Avatar name="Alan Turing" tone="category5" />

Tailles (cercle)

Voir le code (Svelte)

<Avatar name="Sent Tech" size="sm" shape="circle" />
<Avatar name="Sent Tech" size="md" shape="circle" />
<Avatar name="Sent Tech" size="lg" shape="circle" />
<Avatar name="Sent Tech" size="xl" shape="circle" />

Tailles (carré)

Voir le code (Svelte)

<Avatar name="Sent Tech" size="sm" shape="square" />
<Avatar name="Sent Tech" size="md" shape="square" />
<Avatar name="Sent Tech" size="lg" shape="square" />
<Avatar name="Sent Tech" size="xl" shape="square" />

API

Prop	Type	Default
`name`	`string`	requis
`src`	`string`	–
`alt`	`string`	`name`
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`
`shape`	`"circle" \| "square"`	`"circle"`
`tone`	`"category1" … "category8"`	`"category1"`

Rend role="img" avec aria-label dérivé de alt ou name. Les initiales sont calculées à partir du nom.

Tokens utilisés

--st-semantic-surface-default
--st-category-1 … --st-category-8