Source: https://app-studio-6167b.web.app/docs/Avatar

@app-studio/components

# Avatar

Displays a user's avatar, which can be an image or initials, with customizable size and styles.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar.tsx)

## Import

```ts
import { Avatar } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Avatar } from '@app-studio/components';

export const DefaultDemo = () => (
  <Avatar src="https://t3.ftcdn.net/jpg/06/17/13/26/360_F_617132669_YptvM7fIuczaUbYYpMe3VTLimwZwzlWf.jpg" />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Avatar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | `—` | Source URL of the media.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L7) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L9) |
| `fallback` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L11) |
| `views` | `AvatarStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L13) |
| `onClick` | `((event: React.MouseEvent<HTMLElement>) => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L16) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L17) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.