Avatar

Represent people with images, initials, and availability.

Interactive playground

LIVE PREVIEW

Generated code

import { Avatar } from '@vrum/ui';

<Avatar
  initials={"JD"}
  alt={"Jane Doe"}
  src={""}
  shape={"circle"}
  size={"md"}
  status={"online"}
/>

Avatar props

Prop	Type	Default	Description
`src`	`string`	none	Image URL; empty uses initials.
`alt`	`string`	`"Avatar"`	Accessible image description.
`fallback`	`string`	none	fallback configuration.
`initials`	`string`	none	Fallback initials.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Avatar dimensions.
`shape`	`"circle" \| "square" \| "rounded"`	`"circle"`	Avatar shape.
`status`	`"online" \| "offline" \| "busy" \| "away"`	none	Availability indicator.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

Avatar

Interactive playground

Props

Avatar props