- Text Control
- Sizes
- Multiple Images
- Placeholders
- Other elements
- Prop Table
import { Avatar } from '@duik/it'import Avatar from '@duik/avatar'Display user content with ease.
<Avatar imgUrl="/static/media/a01.c0656cf7.jpg" /><span class="avatar"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a01.c0656cf7.jpg" /> </span> </span> ReactHTML Snippet | |
<Avatar imgUrl="/static/media/a01.c0656cf7.jpg" name="John Snow" /><span class="avatar"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a01.c0656cf7.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name">John Snow</span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a01.c0656cf7.jpg"
name={<strong>John Snow</strong>}
/><span class="avatar"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a01.c0656cf7.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>John Snow</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a21.9703cc6c.jpg"
name={<strong>Natasha Special</strong>}
textTop="Created by"
/><span class="avatar"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a21.9703cc6c.jpg" /> </span> <span class="avatar-content"> <span class="avatar-text-top">Created by</span> <span class="avatar-name"> <strong>Natasha Special</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a21.9703cc6c.jpg"
name={<strong>Natasha Special</strong>}
textBottom={<><strong>Senior</strong> HR Manager</>}
/><span class="avatar"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a21.9703cc6c.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>Natasha Special</strong> </span> <span class="avatar-text-bottom"> <strong>Senior</strong> HR Manager </span> </span> </span> ReactHTML Snippet |
<Avatar
imgUrl="/static/media/a02.fa362332.jpg"
name={<strong>28px</strong>}
sm
/><span class="avatar avatar-sm"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a02.fa362332.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>28px</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a03.89105576.jpg"
name={<strong>38px</strong>}
/><span class="avatar"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a03.89105576.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>38px</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a04.b4a6f3b0.jpg"
lg
name={<strong>60px</strong>}
/><span class="avatar avatar-lg"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a04.b4a6f3b0.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>60px</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a05.ed29976e.jpg"
name={<strong>80px</strong>}
xl
/><span class="avatar avatar-xl"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a05.ed29976e.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>80px</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a06.4d47556a.jpg"
name={<strong>100px</strong>}
xxl
/><span class="avatar avatar-xxl"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a06.4d47556a.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>100px</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl="/static/media/a07.f7e8bebd.jpg"
jumbo
name={<strong>120px</strong>}
/><span class="avatar avatar-jumbo"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a07.f7e8bebd.jpg" /> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>120px</strong> </span> </span> </span> ReactHTML Snippet |
<Avatar
imgUrl={[
'/static/media/a05.ed29976e.jpg',
'/static/media/a15.ec9a4b77.jpg'
]}
lg
name={<strong>Just us</strong>}
textTop="Group Conversation"
/><span class="avatar avatar-lg"> <span class="avatar-image-wrapper"> <div class="avatar-image-multi-container s2"> <img alt="" class="avatar-image" src="/static/media/a05.ed29976e.jpg" /> <img alt="" class="avatar-image" src="/static/media/a15.ec9a4b77.jpg" /> </div> </span> <span class="avatar-content"> <span class="avatar-text-top">Group Conversation</span> <span class="avatar-name"> <strong>Just us</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl={[
'/static/media/a10.08642329.jpg',
'/static/media/a11.f961f960.jpg',
'/static/media/a22.68645ff0.jpg'
]}
lg
name={<strong>Reading strong</strong>}
textTop="Group Conversation"
/><span class="avatar avatar-lg"> <span class="avatar-image-wrapper"> <div class="avatar-image-multi-container s3"> <img alt="" class="avatar-image" src="/static/media/a10.08642329.jpg" /> <img alt="" class="avatar-image" src="/static/media/a11.f961f960.jpg" /> <img alt="" class="avatar-image" src="/static/media/a22.68645ff0.jpg" /> </div> </span> <span class="avatar-content"> <span class="avatar-text-top">Group Conversation</span> <span class="avatar-name"> <strong>Reading strong</strong> </span> </span> </span> ReactHTML Snippet | |
<Avatar
imgUrl={[
'/static/media/a09.ef0f5dd5.jpg',
'/static/media/a07.f7e8bebd.jpg',
'/static/media/a25.96289da0.jpg',
'/static/media/a23.43246f05.jpg'
]}
lg
name={<strong>Party people</strong>}
textTop="Group Conversation"
/><span class="avatar avatar-lg"> <span class="avatar-image-wrapper"> <div class="avatar-image-multi-container s4"> <img alt="" class="avatar-image" src="/static/media/a09.ef0f5dd5.jpg" /> <img alt="" class="avatar-image" src="/static/media/a07.f7e8bebd.jpg" /> <img alt="" class="avatar-image" src="/static/media/a25.96289da0.jpg" /> <img alt="" class="avatar-image" src="/static/media/a23.43246f05.jpg" /> </div> </span> <span class="avatar-content"> <span class="avatar-text-top">Group Conversation</span> <span class="avatar-name"> <strong>Party people</strong> </span> </span> </span> ReactHTML Snippet |
| PH28px | <Avatar
avatarPlaceholder={{
color: 'indigo',
content: 'PH'
}}
name={<strong>28px</strong>}
sm
/><span class="avatar avatar-sm"> <span class="avatar-image-wrapper"> <span class="avatar-placeholder bg-indigo">PH</span> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>28px</strong> </span> </span> </span> ReactHTML Snippet |
| PH38px | <Avatar
avatarPlaceholder={{
color: 'blue',
content: 'PH'
}}
name={<strong>38px</strong>}
/><span class="avatar"> <span class="avatar-image-wrapper"> <span class="avatar-placeholder bg-blue">PH</span> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>38px</strong> </span> </span> </span> ReactHTML Snippet |
| PH60px | <Avatar
avatarPlaceholder={{
color: 'green',
content: 'PH'
}}
lg
name={<strong>60px</strong>}
/><span class="avatar avatar-lg"> <span class="avatar-image-wrapper"> <span class="avatar-placeholder bg-green">PH</span> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>60px</strong> </span> </span> </span> ReactHTML Snippet |
| PH80px | <Avatar
avatarPlaceholder={{
color: 'red',
content: 'PH'
}}
name={<strong>80px</strong>}
xl
/><span class="avatar avatar-xl"> <span class="avatar-image-wrapper"> <span class="avatar-placeholder bg-red">PH</span> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>80px</strong> </span> </span> </span> ReactHTML Snippet |
| PH100px | <Avatar
avatarPlaceholder={{
color: 'orange',
content: 'PH'
}}
name={<strong>100px</strong>}
xxl
/><span class="avatar avatar-xxl"> <span class="avatar-image-wrapper"> <span class="avatar-placeholder bg-orange">PH</span> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>100px</strong> </span> </span> </span> ReactHTML Snippet |
| PH120px | <Avatar
avatarPlaceholder={{
color: 'yellow',
content: 'PH'
}}
jumbo
name={<strong>120px</strong>}
/><span class="avatar avatar-jumbo"> <span class="avatar-image-wrapper"> <span class="avatar-placeholder bg-yellow">PH</span> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>120px</strong> </span> </span> </span> ReactHTML Snippet |
Top help you render status etc.
<Avatar
imgUrl="/static/media/a04.b4a6f3b0.jpg"
leftEl={<span>O</span>}
lg
name={<strong>60px</strong>}
/><span class="avatar avatar-lg"> <span class="avatar-image-wrapper"> <img alt="" class="avatar-image" src="/static/media/a04.b4a6f3b0.jpg" /> <span class="avatar-left-el"> <span>O</span> </span> </span> <span class="avatar-content"> <span class="avatar-name"> <strong>60px</strong> </span> </span> </span> ReactHTML Snippet |
| className | Required: false |
| type: string | |
| className, e.g. "my-custom-styling" |
| name | Required: false |
| type: React.ReactNode | |
| Name, group conversation, ... |
| imgUrl | Required: false |
| type: string | string[] | |
| URL or multiple URLs to the image to be displayed |
| avatarPlaceholder | Required: false |
| type: { color: THEME_COLOR, content: React.ReactNode } | |
| Placeholder if image is not available |
| textBottom | Required: false |
| type: React.ReactNode | |
| Any (text) node, such as title, ... |
| textTop | Required: false |
| type: React.ReactNode | |
| Any (text) node, such as title, ... |
| rightEl | Required: false |
| type: React.ReactNode | |
| Element to be displayed on the right side of the Avatar |
| leftEl | Required: false |
| type: React.ReactNode | |
| Element to be displayed on the left side of the Avatar |
| sm | Required: false |
| type: boolean | |
| Renders smaller avatar with height 28px |
| lg | Required: false |
| type: boolean | |
| Renders larger avatar with height 60px |
| xl | Required: false |
| type: boolean | |
| Renders larger avatar with height 80px |
| xxl | Required: false |
| type: boolean | |
| Renders larger avatar with height 100px |
| jumbo | Required: false |
| type: boolean | |
| Renders larger avatar with height 120px |
| ...rest | Required: false |
| type: any | |
| Other properties are passed down to the wrapping element |