React Avatar Component

React avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.

Image avatars#

1<CAvatar src="/images/avatars/1.jpg" />
2<CAvatar src="/images/avatars/2.jpg" />
3<CAvatar src="/images/avatars/3.jpg" />

Letter avatars#

CUI
CUI
CUI
1<CAvatar color="primary" textColor="white">CUI</CAvatar>
2<CAvatar color="secondary">CUI</CAvatar>
3<CAvatar color="warning" textColor="white">CUI</CAvatar>

Rounded avatars#

Use the shape="rounded" prop to make avatars squared with rounded corners.

CUI
CUI
CUI
1<CAvatar color="primary" textColor="white" shape="rounded">CUI</CAvatar>
2<CAvatar color="secondary" shape="rounded">CUI</CAvatar>
3<CAvatar color="warning" textColor="white" shape="rounded">CUI</CAvatar>

Square avatars#

Use the shape="rounded-0" prop to make avatars squared.

CUI
CUI
CUI
1<CAvatar color="primary" textColor="white" shape="rounded-0">CUI</CAvatar>
2<CAvatar color="secondary" shape="rounded-0">CUI</CAvatar>
3<CAvatar color="warning" textColor="white" shape="rounded-0">CUI</CAvatar>

Sizes#

Fancy larger or smaller avatar? Add size="xl", size="lg" or size="sm" for additional sizes.

CUI
CUI
CUI
CUI
1<CAvatar color="secondary" size="xl">CUI</CAvatar>
2<CAvatar color="secondary" size="lg">CUI</CAvatar>
3<CAvatar color="secondary">CUI</CAvatar>
4<CAvatar color="secondary" size="sm">CUI</CAvatar>

Avatars with status#

CUI
1<CAvatar src="/images/avatars/1.jpg" status="success" />
2<CAvatar color="secondary" status="danger">CUI</CAvatar>

API#

CAvatar#

1import { CAvatar } from '@coreui/react'
2// or
3import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
shapeSelect 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-
sizeSize the component small, large, or extra large.string-
srcThe src attribute for the img element.string-
statusSets the color context of the status indicator to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
textColorSets the text color of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string-