> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/8.1.5/api-reference/uicomponents/uiavatar.md).

# UIAvatar

A user avatar component! Can show user images from Gravatar, or a font awesome icon.

**Since**: 7.0.0 (3.0.0)

| Name         | Type      | Default | Description                                        |
| ------------ | --------- | ------- | -------------------------------------------------- |
| avatarId     | `string`  |         | **Required** - ID of the avatar to display         |
| avatarSource | `string`  |         | Soruce for avatar. gravatar\|url                   |
| avatarUrl    | `string`  |         | If avatarSource: url you provied url here          |
| avatarAlt    | `string`  |         | Alt text                                           |
| wrap         | `boolean` | `true`  | If false no div wrapper and styles will be applied |

### Example

```js
import {UIAvatar} from 'writer'

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIAvatar, {
          avatarSource: 'gravatar',
          avatarId: 'test.testsson@test.com',
          avatarAlt: 'Alternative text'
      })
    )
}
```