Avatar
A avatar displays the profile picture of a user.
| Install | yarn add @diallink-corp/convergo-react-avatar |
|---|---|
| Version | 4.1.2 |
| Usage | import {Avatar} from '@diallink-corp/convergo-react-avatar' |
Avatar
<Avatar name="John Doe" />
<Avatar src="https://cryptologos.cc/logos/dogecoin-doge-logo.svg?v=024" /><Avatar name="John Doe" />
<Avatar src="https://cryptologos.cc/logos/dogecoin-doge-logo.svg?v=024" /><Avatar name="John Doe" />
<Avatar src="https://cryptologos.cc/logos/dogecoin-doge-logo.svg?v=024" />Status light
The status light can be used to indicate the status of a user.
<Avatar
size='xsmall'
name='John Doe'
statusLights={[
<StatusLight
role="marquee"
variant='positive'
iconName="CheckCircleIcon"
aria-label="On duty, Available"
/>
]}
/>
<Avatar
size='small'
name='Marie Curie'
statusLights={[
<StatusLight
role="marquee"
variant='negative'
iconName="XMarkCircleIcon"
aria-label="On duty, On a call"
/>
]}
/>
<Avatar size='medium' />
<Avatar
size='large'
name='Jacques Lacan'
statusLights={[
<StatusLight
role="marquee"
variant='negative'
iconName="MinusCircleIcon"
aria-label="Off duty, On a call"
/>
]}
/>
<Avatar
size='xlarge'
name='Gilles Deleuze'
statusLights={[
<StatusLight
role="marquee"
variant='neutral'
iconName="EyeSlashCircleIcon"
aria-label="Invisible"
/>
]}
/><Avatar
size='xsmall'
name='John Doe'
statusLights={[
<StatusLight
role="marquee"
variant='positive'
iconName="CheckCircleIcon"
aria-label="On duty, Available"
/>
]}
/>
<Avatar
size='small'
name='Marie Curie'
statusLights={[
<StatusLight
role="marquee"
variant='negative'
iconName="XMarkCircleIcon"
aria-label="On duty, On a call"
/>
]}
/>
<Avatar size='medium' />
<Avatar
size='large'
name='Jacques Lacan'
statusLights={[
<StatusLight
role="marquee"
variant='negative'
iconName="MinusCircleIcon"
aria-label="Off duty, On a call"
/>
]}
/>
<Avatar
size='xlarge'
name='Gilles Deleuze'
statusLights={[
<StatusLight
role="marquee"
variant='neutral'
iconName="EyeSlashCircleIcon"
aria-label="Invisible"
/>
]}
/><Avatar
size="xsmall"
name="John Doe"
statusLights={[
<StatusLight
role="marquee"
variant="positive"
iconName="CheckCircleIcon"
aria-label="On duty, Available"
/>
]}
/>
<Avatar
size="small"
name="Marie Curie"
statusLights={[
<StatusLight
role="marquee"
variant="negative"
iconName="XMarkCircleIcon"
aria-label="On duty, On a call"
/>
]}
/>
<Avatar size="medium" />
<Avatar
size="large"
name="Jacques Lacan"
statusLights={[
<StatusLight
role="marquee"
variant="negative"
iconName="MinusCircleIcon"
aria-label="Off duty, On a call"
/>
]}
/>
<Avatar
size="xlarge"
name="Gilles Deleuze"
statusLights={[
<StatusLight
role="marquee"
variant="neutral"
iconName="EyeSlashCircleIcon"
aria-label="Invisible"
/>
]}
/><Avatar
size='xsmall'
statusLights={
[
<StatusLight
role="marquee"
variant='positive'
/>,
<StatusLight
role="marquee"
variant='positive'
iconName="CheckCircleIcon"
aria-label="On duty, Available"
>
<Text>On duty, Available</Text>
</StatusLight>
]
}
/>
<Avatar
size='small'
statusLights={
[
<StatusLight
role="marquee"
variant='positive'
/>,
<StatusLight
role="marquee"
variant='negative'
iconName="XMarkCircleIcon"
>
<Text>On Duty, On a call</Text>
</StatusLight>
]
}
/>
<Avatar
size='medium'
statusLights={
[
<StatusLight
role="marquee"
variant='neutral'
iconName="XMarkCircleIcon"
/>,
<StatusLight
role="marquee"
variant='positive'
iconName="CheckCircleIcon"
>
<Text>Off Duty, Available</Text>
</StatusLight>
]
}
/>
<Avatar
size='large'
statusLights={
[
<StatusLight
role="marquee"
variant='neutral'
iconName="XMarkCircleIcon"
/>,
<StatusLight
role="marquee"
variant='negative'
iconName="MinusCircleIcon"
aria-label="Off duty, On a call"
>
<Text>Off Duty, On a call</Text>
</StatusLight>
]
}
/>
<Avatar
size='xlarge'
statusLights={
[
<StatusLight
role="marquee"
variant='positive'
>
<Text>On Duty</Text>
</StatusLight>,
<StatusLight
role="marquee"
variant='neutral'
iconName="EyeSlashCircleIcon"
aria-label="Invisible"
>
<Text>Invisible</Text>
</StatusLight>
]
}
/><Avatar
size='xsmall'
statusLights={
[
<StatusLight
role="marquee"
variant='positive'
/>,
<StatusLight
role="marquee"
variant='positive'
iconName="CheckCircleIcon"
aria-label="On duty, Available"
>
<Text>On duty, Available</Text>
</StatusLight>
]
}
/>
<Avatar
size='small'
statusLights={
[
<StatusLight
role="marquee"
variant='positive'
/>,
<StatusLight
role="marquee"
variant='negative'
iconName="XMarkCircleIcon"
>
<Text>On Duty, On a call</Text>
</StatusLight>
]
}
/>
<Avatar
size='medium'
statusLights={
[
<StatusLight
role="marquee"
variant='neutral'
iconName="XMarkCircleIcon"
/>,
<StatusLight
role="marquee"
variant='positive'
iconName="CheckCircleIcon"
>
<Text>Off Duty, Available</Text>
</StatusLight>
]
}
/>
<Avatar
size='large'
statusLights={
[
<StatusLight
role="marquee"
variant='neutral'
iconName="XMarkCircleIcon"
/>,
<StatusLight
role="marquee"
variant='negative'
iconName="MinusCircleIcon"
aria-label="Off duty, On a call"
>
<Text>Off Duty, On a call</Text>
</StatusLight>
]
}
/>
<Avatar
size='xlarge'
statusLights={
[
<StatusLight
role="marquee"
variant='positive'
>
<Text>On Duty</Text>
</StatusLight>,
<StatusLight
role="marquee"
variant='neutral'
iconName="EyeSlashCircleIcon"
aria-label="Invisible"
>
<Text>Invisible</Text>
</StatusLight>
]
}
/><Avatar
size="xsmall"
statusLights={[
<StatusLight
role="marquee"
variant="positive"
/>,
<StatusLight
role="marquee"
variant="positive"
iconName="CheckCircleIcon"
aria-label="On duty, Available"
>
<Text>
On duty,
Available
</Text>
</StatusLight>
]}
/>
<Avatar
size="small"
statusLights={[
<StatusLight
role="marquee"
variant="positive"
/>,
<StatusLight
role="marquee"
variant="negative"
iconName="XMarkCircleIcon"
>
<Text>
On Duty, On a
call
</Text>
</StatusLight>
]}
/>
<Avatar
size="medium"
statusLights={[
<StatusLight
role="marquee"
variant="neutral"
iconName="XMarkCircleIcon"
/>,
<StatusLight
role="marquee"
variant="positive"
iconName="CheckCircleIcon"
>
<Text>
Off Duty,
Available
</Text>
</StatusLight>
]}
/>
<Avatar
size="large"
statusLights={[
<StatusLight
role="marquee"
variant="neutral"
iconName="XMarkCircleIcon"
/>,
<StatusLight
role="marquee"
variant="negative"
iconName="MinusCircleIcon"
aria-label="Off duty, On a call"
>
<Text>
Off Duty, On a
call
</Text>
</StatusLight>
]}
/>
<Avatar
size="xlarge"
statusLights={[
<StatusLight
role="marquee"
variant="positive"
>
<Text>
On Duty
</Text>
</StatusLight>,
<StatusLight
role="marquee"
variant="neutral"
iconName="EyeSlashCircleIcon"
aria-label="Invisible"
>
<Text>
Invisible
</Text>
</StatusLight>
]}
/>