
```jsx
import { CAvatar } from '@coreui/react'
// or
import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
```

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