---
metaTitle: IslandAvatar component | AwesCode UI
meta:
  - name: description
    content: The <AwIslandAvatar /> component displays an island card with user avatar and information - UI Vue component for AwesCode UI.
title: IslandAvatar
---

# AwIslandAvatar

**Category:** Organism | **Import:** Dynamic

The `AwIslandAvatar` component is a specialized island variant that displays user information with an avatar, name, and additional details in a card format.

## Overview

- User avatar display
- Name and title/role
- Optional description
- Clickable/linkable
- Consistent with AwIsland styling

## Usage

### Basic Example

```markup
<AwIslandAvatar
  :avatar="user.avatar"
  :name="user.name"
  title="Software Engineer"
  description="John has been with the company for 3 years"
/>
```

### As Link

```markup
<AwIslandAvatar
  :avatar="user.avatar"
  :name="user.name"
  :href="`/users/${user.id}`"
/>
```

### Loading State

When loading user data, use `AwContentPlaceholder`:

```markup
<template>
  <AwFlow v-if="loading">
    <AwContentPlaceholder type="avatar" />
    <AwContentPlaceholder type="text" :lines="3" />
  </AwFlow>

  <AwIslandAvatar
    v-else
    :avatar="user.avatar"
    :name="user.name"
    title="Software Engineer"
  />
</template>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| avatar | Avatar image URL | `String` | `false` | `''` |
| name | User name | `String` | `false` | `''` |
| title | User title/role | `String` | `false` | `''` |
| description | Additional description | `String` | `false` | `''` |
| href | Link URL (makes island clickable) | `String` | `false` | `''` |

## Related Components

- [AwIsland](aw-island.md) - Base island component
- [AwUserpic](aw-userpic.md) - User avatar component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Extends AwIsland functionality
- Uses AwUserpic for avatar rendering