Avatar

Uma foto ou iniciais avatar em quatro tamanhos (20 / 24 / 32 / 36px) com tons iniciais neutros e azuis - usado através de tabelas, migalhas de pão, menus, e a barra lateral.

Instalação

Você pode adicionar este componente avatar usando nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add avatar

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Tamanhos

Quatro tamanhos através do tamanho aderente - xs (20px) até lg (36px). A escala do tipo inicial segue o recipiente.

MMMM

<Avatar size="xs" initials="M" /> {/* 20px */}<Avatar size="sm" initials="M" /> {/* 24px */}<Avatar size="md" initials="M" /> {/* 32px */}<Avatar size="lg" initials="M" /> {/* 36px */}

Cores iniciais

As iniciais são renderizadas em uma neutral ou azul superfície através da cor Prop.

BBBB

<Avatar color="neutral" initials="M" /> {/* neutral surface */}<Avatar color="blue" initials="B" /> {/* blue tint */}

Foto

Passar src e alt para um avatar de fotos. As iniciais atuam como o recuo enquanto a imagem carrega ou se falha.

{/* Photo avatars take a src + alt; initials are the fallback */}<Avatar size="md" src="/avatars/livia-saris.webp" alt="Livia Saris" />