Avatar

Displays a user avatar. Falls back to initials derived from name, then to a generic person icon if neither is available.

Playground

Controls

Src

Name

Alt

Size

Shape

Color

Theme

HTMLReact

ShareCopy

Usage

<lt-avatar src="https://i.pravatar.cc/150" name="Jane Doe"></lt-avatar>
<lt-avatar name="Jane Doe" size="lg"></lt-avatar>
<lt-avatar name="Jane Doe" shape="square"></lt-avatar>
<lt-avatar size="md"></lt-avatar>

import { Avatar } from '@latty-ds/react';

<Avatar src="https://i.pravatar.cc/150" name="Jane Doe" />
<Avatar name="Jane Doe" size="lg" />
<Avatar name="Jane Doe" shape="square" />
<Avatar size="md" />

<template>
<lt-avatar src="https://i.pravatar.cc/150" name="Jane Doe"></lt-avatar>
<lt-avatar name="Jane Doe" size="lg"></lt-avatar>
<lt-avatar name="Jane Doe" shape="square"></lt-avatar>
<lt-avatar size="md"></lt-avatar>
</template>

API