Feedback

Avatar

Round avatar with an image or initials on a topic fill.

• Provide name (initials and tooltip); optional src, size (24–48), topic (default coral).

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface AvatarProps {
  name: string;
  src?: string;
  size?: number;
  topic?: Topic
}

Use

import { Avatar } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Avatar/README.md