VAvatar
Vuero <VAvatar /> components are rounded images used for media and personal pages. Avatar sizes can be controled with 'size' prop. Available size prop values small, medium, large, big and xl. See code for more details about usage.
Squared avatar
Avatars can have a square shape instead of a circle shape by adding the squared prop to the avatar component. See code for more details about usage.
Fallback avatar
Vuero Avatars automatically fall back to a placeholder when no valid URL is provided for the picture prop.
Avatar dot
Avatars can have a small dot attached to them, if you'd like to show a user status for example. Add the dot prop to the target avatar component. See code for more details about usage.
Squared dot
Avatars can have a small dot attached to them, if you'd like to show a user status for example. Add the dot prop to the target avatar component. See code for more details about usage.
Dot colors
Avatar dots can have different colors. Set the dotColor prop to primary, info, warning, danger or grey to change the dot color. See code for more details about usage.
Avatar badge
Vuero avatars can have badge images attached to them. Simply add a 1:1 ratio image URL to the avatar component using the badge prop.
Fake avatar
When the provided picture URL is null, the avatar component falls back to a fake avatar. Same size mofifiers are available. Use the initials prop to pass initials to the component. See the code examples for more details about usage.
Fake squared
When the provided picture URL is null, the avatar component falls back to a fake avatar. Same size mofifiers are available. Use the initials prop to pass initials to the component. See the code examples for more details about usage.
Fake badge
When the provided picture URL is null, the avatar component falls back to a fake avatar. Fake avatars can also have badges. See the code examples for more details about usage.
Fake avatar colors
Fake avatars can have different colors to break monotony. You can change the avatar color passing one of the following values to the color prop: primary, success, info, warning, danger, h-purple, h-orange, h-blue, h-green, h-red, h-yellow. Supports dark mode.
Fake squared colors
Fake avatars can have different colors to break monotony. You can change the avatar color passing one of the following values to the color prop: primary, success, info, warning, danger, h-purple, h-orange, h-blue, h-green, h-red, h-yellow. Supports dark mode.
VAvatar Props
Here is the full props available for <VAvatar /> component:
| Props | Default | Type |
|---|---|---|
| picture | undefined | string |
| pictureDark | undefined | string |
| badge | undefined | string |
| placeholder | https://via.placeholder.com/50x50 | string |
| initials | ? | string |
| size | undefined | small, medium, large, big, xl |
| color | undefined | primary, success, info, warning, danger, h-purple, h-orange, h-blue, h-green, h-red, h-yellow |
| dotColor | undefined | primary, success, info, warning, danger, grey |
| squared | false | boolean |
| dot | false | boolean |