Avatar — Sinapse Design System

Tipos

user = pessoa (circular). company = instituição (square). system = produto/sistema (square + border).

<Avatar type="user" initials="MS" />
<Avatar type="company" />
<Avatar type="system" />

<template>
<div class="flex items-center justify-center rounded-full bg-secondary-100 text-secondary-900 font-medium" style="width:56px;height:56px">MS</div>
<div class="flex items-center justify-center rounded-card bg-secondary-100 text-secondary-900" style="width:56px;height:56px">
  <span class="material-symbols-outlined">apartment</span>
</div>
<div class="flex items-center justify-center rounded-card border border-border bg-background text-foreground" style="width:56px;height:56px">
  <span class="material-symbols-outlined">deployed_code</span>
</div>
</template>

<>
<div className="flex items-center justify-center rounded-full bg-secondary-100 text-secondary-900 font-medium" style={{width:56,height:56}}>MS</div>
<div className="flex items-center justify-center rounded-card bg-secondary-100 text-secondary-900" style={{width:56,height:56}}>
  <span className="material-symbols-outlined">apartment</span>
</div>
<div className="flex items-center justify-center rounded-card border border-border bg-background text-foreground" style={{width:56,height:56}}>
  <span className="material-symbols-outlined">deployed_code</span>
</div>
</>

<div class="flex items-center justify-center rounded-full bg-secondary-100 text-secondary-900 font-medium" style="width:56px;height:56px">MS</div>
<div class="flex items-center justify-center rounded-card bg-secondary-100 text-secondary-900" style="width:56px;height:56px">
<span class="material-symbols-outlined">apartment</span>
</div>
<div class="flex items-center justify-center rounded-card border border-border bg-background text-foreground" style="width:56px;height:56px">
<span class="material-symbols-outlined">deployed_code</span>
</div>

Sizes

Tamanho livre via prop size (default 56). Initials e ícone escalam proporcionalmente.

JS JS JS JS

<Avatar size={32} initials="JS" />
<Avatar size={40} initials="JS" />
<Avatar size={56} initials="JS" />
<Avatar size={80} initials="JS" />

Com imagem

src cobre o avatar. alt para acessibilidade.

<Avatar type="user" src="https://i.pravatar.cc/150?img=12" alt="Dra. Maria Silva" />
<Avatar type="company" src="https://placehold.co/120/0a4275/ffffff?text=ITpS" alt="ITpS" />

Ícone customizado

Override do default por tipo via fallbackIcon.

<Avatar type="company" fallbackIcon="local_pharmacy" />
<Avatar type="company" fallbackIcon="local_hospital" />
<Avatar type="system" fallbackIcon="monitor_heart" />

Props

Prop	Tipo	Default	Descrição
`type`	`'user' \| 'company' \| 'system'`	`'user'`	Forma + ícone default.
`size`	`number`	`56`	Tamanho em px.
`src`	`string`	—	URL da imagem. Cobre o avatar inteiro.
`alt`	`string`	`''`	Alt da imagem.
`initials`	`string`	—	Iniciais (só `user`, sem `src`). 2 chars max.
`fallbackIcon`	`string`	por type	Material Symbol custom no fallback.
`class`	`string`	—	Classes adicionais.