Lapikit

Avatar component

Avatar

The Avatar component is used to display images, icons or initials representing a person or object. It is often used in user interfaces to identify users, profiles or entities. Thanks to its many customization options, the Avatar component adapts easily to different styles and contexts.`

Examples of avatar

Base

This example shows the simple use of the Avatar component with its default settings. Ideal for quick, intuitive integration.

Size

The size property defines the size of the Avatar. The available options: xs, sm, md, lg, xl and full, adapt to different design needs.

Density

The density property adjusts the density of the Avatar: compact, comfortable or default. This allows you to control the spacing and overall appearance of the component.

Hey

Variant

The variant property lets you customize the Avatar’s style. The available options: outline, text and dash, offer visual variations adapted to different contexts.

API Reference

props	type	description	default	type_extend
ref $bindable	HTMLElement	Direct access to DOM element	undefined
dark	boolean	Enable dark theme for component.	false
light	boolean	Enable light theme for the component.	false
color	string	Applies a custom color to text or icons.	undefined
background	string	Apply a custom background color.	undefined
density	enum	Controls vertical density	`default`	`compact` \| `comfortable` \| `default`
rounded	string	Controls item rounding (`none`, `sm`, `md`, `lg`, etc.).	`md`
variant	enum	Sets the visual style of the avatar.	undefined	`outline` \| `text` \| `dash`
src	string	Specifies the URL of the image to be displayed in the Avatar	undefined
size	enum	Set Avatar size: xs, sm, md, lg, xl or full.	`md`	`xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`

Variables CSS

variable	default	description
`–-avatar-color`	`–-kit-on-container`	Text color
`–-avatar-background`	`–-kit-container`	Background color
`–-avatar-radius`	`--kit-radius-full`	Avatar edge radius

Associate Avatars with user Cards or Chips to display roles or status.