Avatar

Avatar is part of the Atoms set, imported from @jcsoftdev/ui/atoms.

Import

import { Avatar } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/avatar.

Usage

<Avatar name="Diego Quispe" size="md" />

Props

Prop	Type	Default	Description
name *	string		Full name: used for the initials fallback and as the accessible name.
src	string
size	"md" | "lg"	"md"
highlighted	boolean		Fills the avatar with the accent color (e.g. the current user).
className	string

* marks a required prop.

Storybook stories

• Default
• Large
• Highlighted
• Single Name
• Team

Source

packages/ui/src/atoms/avatar/avatar.tsx