Skip to content 
Avatar content
John Doe
Avatar ⚠️ Experimental
The Avatar component can be used imported from:
Playground
Parameters
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | |
name | span | |
image-src | span | Image of the component |
Parameters use
Check the documentation about how to use the parameters.
content
The thing to be assigned to the avatar. It uses the default slot too.
config
The config attribute is used to set the orientation of the avatar. Possible values are: horizontal, vertical or dropdown.
name
The name attribute is used to set the name for the avatar. It can also use the name slot.
dropdown-elements
The dropdown configuration requires the dropdown-elements attribute to be set.
Profile attributes
image-src
The image-src parameter is used to define the image URL to be displayed inside the avatar.
You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.
initials
The initials it`s used to set the initials for the avatar.
status
The status it's used to set the status for the avatar. Possible values are: online,occupied or absent
Alternatively, you can use the profile slot:
Badge attributes
badge
The badge it's used to set the badge for the avatar. It requires an object with the badge configuration.
Alternatively, you can directly place a <z-badge> tag in the default slot.
Browser support
Detected engine:
Chromium
Webkit
Gecko