Avatar

import { Avatar } from '@vapor-ui/core';

import { GOORM_FAVICON_URL } from '~/constants/image-urls';

export default function DefaultAvatar() {
    return <Avatar.Root size="md" alt="goorm" src={GOORM_FAVICON_URL} />;
}

Property

Size

Avatar 사이즈는 sm, md, lg, xl 로 제공합니다.

SMLX

import { Avatar } from '@vapor-ui/core';

export default function AvatarSize() {
    return (
        <div className="flex flex-wrap items-center gap-4">
            <Avatar.Root
                size="sm"
                alt="SM"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="md"
                alt="MD"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="lg"
                alt="LG"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="xl"
                alt="XL"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
        </div>
    );
}

Shape

Avatar 모양은 circle, square 로 제공합니다.

import { Avatar } from '@vapor-ui/core';

export default function AvatarShape() {
    return (
        <div className="flex flex-wrap items-center gap-4">
            <Avatar.Root
                size="lg"
                shape="circle"
                alt="Circle Avatar"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
            <Avatar.Root
                size="lg"
                shape="square"
                alt="Square Avatar"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            />
        </div>
    );
}

Examples

Custom Usage

Avatar의 유연한 사용 예시입니다.

UIVCVD

import { Avatar } from '@vapor-ui/core';

export default function Flexible() {
    return (
        <div className="flex gap-4">
            <Avatar.Root
                size="md"
                alt="UI"
                src="https://statics.goorm.io/gds/docs/images/vapor-log.svg"
            >
                <Avatar.FallbackPrimitive>UI</Avatar.FallbackPrimitive>
                <Avatar.ImagePrimitive />
            </Avatar.Root>
            <Avatar.Root size="md" alt="Core" src="/invalid-image.jpg">
                <Avatar.FallbackPrimitive>VC</Avatar.FallbackPrimitive>
                <Avatar.ImagePrimitive />
            </Avatar.Root>
            <Avatar.Root size="md" alt="Design">
                <Avatar.FallbackPrimitive>VD</Avatar.FallbackPrimitive>
                <Avatar.ImagePrimitive />
            </Avatar.Root>
        </div>
    );
}

Fallback Only

이미지 로드 실패 시 표시되는 Fallback 텍스트나 이니셜을 사용하는 패턴입니다.

VVT

import { Avatar } from '@vapor-ui/core';

export default function AvatarFallbackOnly() {
    return (
        <div className="flex gap-4">
            <Avatar.Root size="md" alt="Vapor Library">
                <Avatar.FallbackPrimitive />
            </Avatar.Root>
            <Avatar.Root size="md" alt="Vapor tokens">
                <Avatar.FallbackPrimitive>VT</Avatar.FallbackPrimitive>
            </Avatar.Root>
            <Avatar.Root size="md" alt="Vapor Delay" delay={600}>
                <Avatar.FallbackPrimitive>VD</Avatar.FallbackPrimitive>
            </Avatar.Root>
        </div>
    );
}

Props Table

Avatar.Root

Avatar의 메인 컨테이너 컴포넌트입니다. size와 shape 속성을 제공하며, 모든 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다.

Prop	Default	Type
render?	span	ReactElementfunction
size?	md	smmdlgxl
shape?	square	circlesquare
alt?	-	string
src?	-	string
delay?	null	number
children?	null	ReactNode
className?	null	stringfunction

Avatar.ImagePrimitive

Avatar 이미지를 표시하는 컴포넌트입니다. src가 로드되지 않거나 오류가 발생할 경우 자동으로 Fallback 컴포넌트가 표시됩니다.

Prop	Default	Type
render?	img	ReactElementfunction
src?	-	string
alt?	-	string
onLoadingStatusChange?	-	function
className?	-	stringfunction

Avatar.FallbackPrimitive

이미지가 로드되지 않을 때 표시되는 대체 컴포넌트입니다. alt 속성을 기반으로 자동으로 이니셜을 생성하고, Linear Congruential Generator 알고리즘을 사용해 일관된 배경 색상을 제공합니다.

Prop	Default	Type
render?	span	ReactElementfunction
delay?	-	number
children?	-	ReactNode
className?	-	stringfunction

On this page