ZAvatar

User avatar with fallback

Example

Import

tsx

import { ZAvatar } from "zurto-ui";

Usage

tsx

import { ZAvatar } from "zurto-ui";

function Example() {
  return (
    <>
      <ZAvatar name="John Doe" size="sm" />
      <ZAvatar src="https://example.com/avatar.jpg" size="md" />
      <ZAvatar name="Alice Brown" size="lg" color="blue" />
    </>
  );
}

Props

| Prop | Type | Default | Description | | ------- | -------- | ----------- | ----------------- | ----- | ------ | ----------- | | src | string | - | Image URL | | name | string | - | Name for initials | | size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar size | | color | string | 'primary' | Background color |

Accessibility

✅ Keyboard navigation support
✅ ARIA attributes included
✅ Screen reader friendly
✅ Focus management

ZAvatar ​

Example ​

Import ​

Usage ​

Props ​

Accessibility ​