Avatar

Displays user, contact, or business profile pictures with customizable styling and initials fallback.

Open in Storybook

Interactive Demo

Size: smallmediumlarge

Usage

<script setup>
import { Avatar } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Avatar type="user" size="large" firstName="John" lastName="Doe" />
</template>

API Reference

Props

Prop	Type	Default	Description
type	string	—	Avatar type (user, contact, business)
size	string	—	Avatar size
initials	string	—	Custom initials to display
firstName	string	—	First name for auto-generated initials
lastName	string	—	Last name for auto-generated initials
backgroundColor	string	—	Custom background color
textColor	string	—	Custom text color
alt	string	—	Alt text for image
ariaLabel	string	—	Accessible label