Hire Us Get CoreUI PRO all-access →

React Avatar Component API

Avatar API

Markdown ChatGPT Claude

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

On this page

CAvatar

jsx 
import { CAvatar } from '@coreui/react-pro'
PropertyDefaultType
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.