Preview

Usage

Avatar fallbacks are based on the username or full name. For many avatars, use the StackedAvatars component.

import { Avatar } from "natmfat/components/Avatar";

<Avatar
  username="natmfat"
  src="https://www.natmfat.com/logo.png"
  size={tokens.space48}
/>

Reference

Prop	Type	Default
backgroundColor	ColorStyles
heading	string
subheading	string
maxTextWidth	number
verticalAlign	"start""end"
buttons	ButtonProps[]	[]
src	string
username	string
fullName	string
size	SpaceStyles	tokens.space32