Avatar - Vapor UI

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

크기를 지정합니다.

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

모양을 지정합니다.

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

Composition Pattern

하위 컴포넌트를 조합하여 이미지와 대체 콘텐츠를 커스터마이징합니다.

UCD

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

이미지 없이 대체 콘텐츠만 표시합니다. delay prop으로 대체 콘텐츠의 표시 지연 시간을 설정합니다.

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

Loading component documentation...

Avatar.ImagePrimitive

Loading component documentation...

Avatar.FallbackPrimitive

Loading component documentation...

On this page