# React Avatar Component API

> Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization.

## CAvatar

```jsx
import { CAvatar } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the component. |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `shape` | `'rounded' \| 'rounded-top' \| 'rounded-end' \| 'rounded-bottom' \| 'rounded-start' \| 'rounded-circle' \| 'rounded-pill' \| 'rounded-0' \| 'rounded-1' \| 'rounded-2' \| 'rounded-3' \| string` | - | Select the shape of the component. |
| `size` | `string \| undefined` | - | Size the component small, large, or extra large. |
| `src` | `string \| undefined` | - | The src attribute for the img element. |
| `status` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| string` | - | Sets the color context of the status indicator to one of CoreUI’s themed colors. |
| `textColor` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-emphasis' \| 'secondary-emphasis' \| 'success-emphasis' \| 'danger-emphasis' \| 'warning-emphasis' \| 'info-emphasis' \| 'light-emphasis' \| 'body' \| 'body-emphasis' \| 'body-secondary' \| 'body-tertiary' \| 'black' \| 'black-50' \| 'white' \| 'white-50' \| string` | - | Sets the text color of the component to one of CoreUI’s themed colors. |