Skip to content

Avatar

A sl-avatar component shows an image that usually represent a user or known entity.

html
<sl-avatar name="John Doe"/>
<sl-avatar name="John Doe" background="#4A4052"/>
<sl-avatar name="Slithe" src="/favicon.svg"/>

Modifiers

Adding those boolean attributes allows to modify the avatar styling.

Shapes
html
<!-- Shapes -->
<sl-avatar name="John Doe" circle/>
<sl-avatar name="John Doe" square/>

Attributes

Name

The avatar name, used as a way to display initials as default or fallback when no image can be found.

html
<sl-avatar name="John Doe"/>
<sl-avatar name="Melissa Forte"/>

Size

Modifies the avatar size, default to 32px.

html
<sl-avatar name="John Doe" size="64px"/>

Tooltip

Adds a tooltip text to provide more information.

html
<sl-avatar name="John Doe" tooltip="Is there anything in the box, darling?"/>