# Avatar

> `Avatar` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

Source: https://ui.jcsoftdev.com/docs/components/avatar

`Avatar` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

## Import

```ts
import { Avatar } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/avatar`.

## Usage

```tsx
<Avatar name="Diego Quispe" size="md" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` * | `string` |  | Full name: used for the initials fallback and as the accessible name. |
| `src` | `string` |  |  |
| `size` | `"md" \| "lg"` | `"md"` |  |
| `highlighted` | `boolean` |  | Fills the avatar with the accent color (e.g. the current user). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/atoms-avatar--default)
- [Large](/storybook/?path=/story/atoms-avatar--large)
- [Highlighted](/storybook/?path=/story/atoms-avatar--highlighted)
- [Single Name](/storybook/?path=/story/atoms-avatar--single-name)
- [Team](/storybook/?path=/story/atoms-avatar--team)

## Source

`packages/ui/src/atoms/avatar/avatar.tsx`