Avatar

An image element with a fallback for representing the user.

Examples

Size

Shape

Status

import { Avatar } from 'kalki-design'

<Avatar>Click me</Avatar>

npx kalki-design add avatar

import { Avatar } from 'kalki-design'

export default function Example() {
  return <Avatar />
}

Name	Type	Default	Description
Name`src`	Type`string`	Default`—`	DescriptionThe image source URL.
Name`alt`	Type`string`	Default`'Avatar'`	DescriptionAlternative screen reader text.
Name`initials`	Type`string`	Default`—`	DescriptionInitials to show if the image is missing.
Name`size`	Type`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	Default`'md'`	DescriptionSize of the avatar.
Name`shape`	Type`'circle' \| 'square'`	Default`'circle'`	DescriptionShape of the avatar.
Name`status`	Type`'online' \| 'offline' \| 'away' \| 'busy' \| 'none'`	Default`—`	DescriptionAn optional status indicator bubble.