Avatar

Displays user photos, team icons, or blank placeholders.

Import

import '@kittl/ui';

import { Avatar } from '@kittl/ui-react';

Usage

<kittl-avatar src="https://picsum.photos/seed/kittl/200"></kittl-avatar>
<kittl-avatar variant="team" fallback="KT"></kittl-avatar>
<kittl-avatar variant="blank"></kittl-avatar>

import { Avatar } from '@kittl/ui-react';

/** Basic Avatar usage, rendered live on the docs site. */
export const AvatarUsage = () => (
  <>
    <Avatar src="https://picsum.photos/seed/kittl/200" />
    <Avatar variant="team" fallback="KT" />
    <Avatar variant="blank" />
  </>
);

Props

Property	Attribute	Type	Default	Description
variant	variant	'photo' | 'team' | 'blank'	'photo'	Display variant
src	src	string	—	Image URL
fluid	fluid	boolean	false	Fill available width
fallback	fallback	string	—	Fallback text when image fails
round	round	'full' | 'square'	'full'	Border radius style

Notes

• Automatically falls back to fallback text if the image fails to load.
• The team variant renders a different layout suited for team/group icons.