Vue Avatar Component
Vue 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 React components. To learn more please visit the following pages.
Image avatars
<CAvatar src="/images/avatars/1.jpg"/>
<CAvatar src="/images/avatars/2.jpg"/>
<CAvatar src="/images/avatars/3.jpg"/>
Letter avatars
CUI
CUI
CUI
<CAvatar color="primary" text-color="white">CUI</CAvatar>
<CAvatar color="secondary">CUI</CAvatar>
<CAvatar color="warning" text-color="white">CUI</CAvatar>
Rounded avatars
Use the shape="rounded" prop to make avatars squared with rounded corners.
CUI
CUI
CUI
<CAvatar color="primary" text-color="white" shape="rounded">CUI</CAvatar>
<CAvatar color="secondary" shape="rounded">CUI</CAvatar>
<CAvatar color="warning" text-color="white" shape="rounded">CUI</CAvatar>
Square avatars
Use the shape="rounded-0" prop to make avatars squared.
CUI
CUI
CUI
<CAvatar color="primary" text-color="white" shape="rounded-0">CUI</CAvatar>
<CAvatar color="secondary" shape="rounded-0">CUI</CAvatar>
<CAvatar color="warning" text-color="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
<CAvatar color="secondary" size="xl">CUI</CAvatar>
<CAvatar color="secondary" size="lg">CUI</CAvatar>
<CAvatar color="secondary">CUI</CAvatar>
<CAvatar color="secondary" size="sm">CUI</CAvatar>
Avatars with status
CUI
<CAvatar src="/images/avatars/1.jpg" status="success"/>
<CAvatar color="secondary" status="danger">CUI</CAvatar>
API
CAvatar
import { CAvatar } from '@coreui/vue'
// or
import CAvatar from '@coreui/vue/src/components/avatar/CAvatar'
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' | - |
| shape | Select the shape of the component. | string | 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3' | - |
| size | Size the component small, large, or extra large. | string | 'sm', 'md', 'lg', 'xl' | - |
| 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. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' | - |
| text-color | Sets the text color of the component to one of CoreUI’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse' | - |