Dashboard UI Kit

Apps PreviewDownload Design Package

Avatar

import { Avatar } from '@duik/it'
import Avatar from '@duik/avatar'

Display user content with ease.

Text control

<Avatar imgUrl="/static/media/a01.c0656cf7.jpg" />
ReactHTML Snippet
John Snow
<Avatar imgUrl="/static/media/a01.c0656cf7.jpg" name="John Snow" />
ReactHTML Snippet
John Snow
<Avatar
  imgUrl="/static/media/a01.c0656cf7.jpg"
  name={<strong>John Snow</strong>}
/>
ReactHTML Snippet
Created byNatasha Special
<Avatar
  imgUrl="/static/media/a21.9703cc6c.jpg"
  name={<strong>Natasha Special</strong>}
  textTop="Created by"
/>
ReactHTML Snippet
Natasha SpecialSenior HR Manager
<Avatar
  imgUrl="/static/media/a21.9703cc6c.jpg"
  name={<strong>Natasha Special</strong>}
  textBottom={<><strong>Senior</strong> HR Manager</>}
/>
ReactHTML Snippet

Sizes

28px
<Avatar
  imgUrl="/static/media/a02.fa362332.jpg"
  name={<strong>28px</strong>}
  sm
/>
ReactHTML Snippet
38px
<Avatar
  imgUrl="/static/media/a03.89105576.jpg"
  name={<strong>38px</strong>}
/>
ReactHTML Snippet
60px
<Avatar
  imgUrl="/static/media/a04.b4a6f3b0.jpg"
  lg
  name={<strong>60px</strong>}
/>
ReactHTML Snippet
80px
<Avatar
  imgUrl="/static/media/a05.ed29976e.jpg"
  name={<strong>80px</strong>}
  xl
/>
ReactHTML Snippet
100px
<Avatar
  imgUrl="/static/media/a06.4d47556a.jpg"
  name={<strong>100px</strong>}
  xxl
/>
ReactHTML Snippet
120px
<Avatar
  imgUrl="/static/media/a07.f7e8bebd.jpg"
  jumbo
  name={<strong>120px</strong>}
/>
ReactHTML Snippet

Multiple Images

Group ConversationJust us
<Avatar
  imgUrl={[
    '/static/media/a05.ed29976e.jpg',
    '/static/media/a15.ec9a4b77.jpg'
  ]}
  lg
  name={<strong>Just us</strong>}
  textTop="Group Conversation"
/>
ReactHTML Snippet
Group ConversationReading strong
<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"
/>
ReactHTML Snippet
Group ConversationParty people
<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"
/>
ReactHTML Snippet

Placeholders

PH28px
<Avatar
  avatarPlaceholder={{
    color: 'indigo',
    content: 'PH'
  }}
  name={<strong>28px</strong>}
  sm
/>
ReactHTML Snippet
PH38px
<Avatar
  avatarPlaceholder={{
    color: 'blue',
    content: 'PH'
  }}
  name={<strong>38px</strong>}
/>
ReactHTML Snippet
PH60px
<Avatar
  avatarPlaceholder={{
    color: 'green',
    content: 'PH'
  }}
  lg
  name={<strong>60px</strong>}
/>
ReactHTML Snippet
PH80px
<Avatar
  avatarPlaceholder={{
    color: 'red',
    content: 'PH'
  }}
  name={<strong>80px</strong>}
  xl
/>
ReactHTML Snippet
PH100px
<Avatar
  avatarPlaceholder={{
    color: 'orange',
    content: 'PH'
  }}
  name={<strong>100px</strong>}
  xxl
/>
ReactHTML Snippet
PH120px
<Avatar
  avatarPlaceholder={{
    color: 'yellow',
    content: 'PH'
  }}
  jumbo
  name={<strong>120px</strong>}
/>
ReactHTML Snippet

Other elements

Top help you render status etc.

O60px
<Avatar
  imgUrl="/static/media/a04.b4a6f3b0.jpg"
  leftEl={<span>O</span>}
  lg
  name={<strong>60px</strong>}
/>
ReactHTML Snippet

Prop table

className

false

type: string
className, e.g. "my-custom-styling"
name

false

type: React.ReactNode
Name, group conversation, ...
imgUrl

false

type: string | string[]
URL or multiple URLs to the image to be displayed
avatarPlaceholder

false

type: { color: THEME_COLOR, content: React.ReactNode }
Placeholder if image is not available
textBottom

false

type: React.ReactNode
Any (text) node, such as title, ...
textTop

false

type: React.ReactNode
Any (text) node, such as title, ...
rightEl

false

type: React.ReactNode
Element to be displayed on the right side of the Avatar
leftEl

false

type: React.ReactNode
Element to be displayed on the left side of the Avatar
sm

false

type: boolean
Renders smaller avatar with height 28px
lg

false

type: boolean
Renders larger avatar with height 60px
xl

false

type: boolean
Renders larger avatar with height 80px
xxl

false

type: boolean
Renders larger avatar with height 100px
jumbo

false

type: boolean
Renders larger avatar with height 120px
...rest

false

type: any
Other properties are passed down to the wrapping element