# Avatar

A person's picture with their initial when there is none (or it fails to load).

Source page: https://sproutboat.com/ikada/components/avatar

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/avatar.json
```
Or from the package: `import { Avatar } from "@sproutboat/ikada";`
## Usage
```tsx
import { Avatar } from "@/components/ikada/avatar";

<Avatar name="robin" size="lg" />
```
## Examples
### Sizes
24, 32 and 48px. The first letter of the name stands in when there is no picture.
```tsx
<Avatar name="robin" size="sm" />
<Avatar name="wren" />
<Avatar name="finch" size="lg" />
```
### Next to a name
Decorative beside a visible name: the initial is hidden from screen readers.
```tsx
<div className="flex items-center gap-2.5">
  <Avatar name="heron" />
  <span className="text-sb-base font-medium">heron</span>
</div>
```
## Props
### AvatarProps
Also takes every prop of `Omit<ComponentProps<typeof BaseAvatar.Root>, "children" | "className">`.
| Prop | Type | Description |
| --- | --- | --- |
| src? | `string \| null` | The picture URL. A missing or broken image falls back to the initial. |
| name | `string` | Whose avatar it is. Becomes the image alt text; its first letter is the fallback. |
| size? | `"sm" \| "md" \| "lg"` | 24px (sm), 32px (md, the default) or 48px (lg). |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| style? | `CSSProperties \| ((state: AvatarRootState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, AvatarRootState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/avatar.tsx