Support CoreUI Development
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
- Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
- Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
- Give us a star ⭐️ on Github.
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.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
Image avatars#
1<CAvatar src={Avatar1} />2<CAvatar src={Avatar2} />3<CAvatar src={Avatar3} />
Letter avatars#
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 react avatars squared with rounded corners.
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 react avatars squared.
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 react avatar component? Add size="xl", size="lg" or size="sm" for additional sizes.
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#
1<CAvatar src={Avatar1} status="success" />2<CAvatar color="secondary" status="danger">CUI</CAvatar>
API#
CAvatar#
1import { CAvatar } from '@coreui/react'2// or3import 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' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string | - |