amezquita design systemGet started

Primitives

Avatar

User profile picture with fallback to initials when no image is provided

Markdown version for agents

Import
import { Avatar } from '@amezquita/design-system/components/primitives/Avatar'

Live render

    Props

    PropTypeDescription
    src?string
    alt?string
    fallback?string
    size?'sm' | 'md' | 'lg' | 'xl'

    Tokens

    TokenTypeValue
    --avatar-fallback-font-sizedimension14px
    --avatar-fallback-font-weightfontWeight600
    --avatar-group-overlapdimension-8px
    --avatar-ring-widthdimension2px
    --avatar-size-lgdimension40px
    --avatar-size-mddimension32px
    --avatar-size-smdimension24px
    --avatar-size-xldimension64px

    Sub-components

    Imported from the same path as Avatar.