React Avatar Component API
Avatar API
Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization.
On this page
CAvatar#
import { CAvatar } from '@coreui/react'// orimport CAvatar from '@coreui/react/src/components/avatar/CAvatar'| Property | Default | Type |
|---|---|---|
| className# | - | string |
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 |
Size the component small, large, or extra large. | ||
| src# | - | string |
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. | ||