Avatar

Displays user photos, team icons, or blank placeholders.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

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

Usage

Web Component

<kittl-avatar src="https://example.com/photo.jpg"></kittl-avatar>
<kittl-avatar variant="team" fallback="KT"></kittl-avatar>
<kittl-avatar variant="blank"></kittl-avatar>

React

<Avatar src="https://example.com/photo.jpg" />
<Avatar variant="team" fallback="KT" />
<Avatar variant="blank" />

Props

Property	Type	Default	Description
variant	'photo' | 'team' | 'blank'	'photo'	Display variant
src	string	—	Image URL
fallback	string	—	Fallback text when image fails
fluid	boolean	false	Fill available width
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.