Avatar

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

Demo

React

SizeSmallMediumLarge

VariantCircleRoundedSquare

U

JD

Vue

SizeSmallMediumLarge

VariantCircleRoundedSquare

U

JD

Usage

React

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"
  />
);

Vue

<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

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

Vue

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

Types

type AvatarFallbackVariant = 'initials' | 'icon'
type AvatarSize = 'sm' | 'md' | 'lg'
type AvatarVariant = 'circle' | 'rounded' | 'square'