Avatar

The Avatar component displays a user’s profile picture or their initials as a fallback.

Demo

React
Vue

Size

Variant

No name

Initials

Icon

Picture

With link

Example

React
Vue

import { Avatar } from '@fintech-sandpit/ui/react';

return (
  <Avatar
    avatarUrl="https://example.com/avatar.jpg"
    firstName="John"
    lastName="Doe"
    size="sm"
    variant="circle"
    fallbackVariant="initials"
  />
);

<script setup lang="ts">
import { Avatar } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Avatar
    avatar-url="https://example.com/avatar.jpg"
    first-name="John"
    last-name="Doe"
    size="sm"
    variant="circle"
    fallback-variant="initials"
  />
</template>

Props

React
Vue

Name	Type	Default	Description
`firstName`	`string`		First name
`lastName`	`string`		Last name
`avatarUrl`	`string`		Avatar URL
`size`	`AvatarSize`	`md`	Avatar size
`variant`	`AvatarVariant`	`circle`	Visual variant
`fallbackVariant`	`AvatarFallbackVariant`	`initials`	Fallback variant

Name	Type	Default	Description
`first-name`	`string`		First name
`last-name`	`string`		Last name
`avatar-url`	`string`		Avatar URL
`size`	`AvatarSize`	`md`	Avatar size
`variant`	`AvatarVariant`	`circle`	Visual variant
`fallback-variant`	`AvatarFallbackVariant`	`initials`	Fallback variant

Attributes

Name	Type	Example	Description
`data-avatar-size`	`CssUnit`	`'100px'`	Set the exact size of the avatar

Types

type AvatarFallbackVariant = 'initials' | 'icon'
type AvatarSize = 'sm' | 'md' | 'lg'
type AvatarVariant = 'circle' | 'rounded' | 'square'
type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`