Avatar

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

AgentAvatar
Avatar
AvatarBadge
AvatarGroupCount
RuntimeAvatar
StatusDot

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

AgentAvatar

AgentAvatar 속성
PropType필수 여부
isDeactivatedboolean선택
isMeboolean선택
labelstring필수
size'lg' | 'md' | 'sm'선택
errorTooltipReactNode조건부
srcstring조건부
type"default" | "image" | "error"조건부

Avatar

Avatar 속성
PropType필수 여부
isDeactivatedboolean선택
isMeboolean선택
labelstring필수
size'lg' | 'md' | 'sm'선택
errorTooltipReactNode조건부
initialsstring조건부
srcstring조건부
type"image" | "error" | "default"조건부

AvatarBadge

AvatarBadge 속성
PropType필수 여부
isDeactivatedboolean선택
isMeboolean선택
size"lg" | "md" | "sm" | RuntimeAvatarSize선택
status'online' | 'busy' | 'offline'선택
statusLabelstring필수
initialsstring조건부
labelstring필수
srcstring조건부
type"default" | "agent" | "runtime"조건부

AvatarGroupCount

AvatarGroupCount 속성
PropType필수 여부
avatars2 | 3 | 4 | 5 | 6선택
childrenReactElement<AvatarProps, string | JSXElementConstructor<any>> | readonly ReactElement<AvatarProps, string | JSXElementConstructor<any>>[]필수
totalnumber필수
aria-labelstring조건부
aria-labelledbystring조건부

RuntimeAvatar

RuntimeAvatar 속성
PropType필수 여부
isDeactivatedboolean선택
isMeboolean선택
labelstring필수
sizeRuntimeAvatarSize선택
errorTooltipReactNode조건부
srcstring조건부
type"error" | "image"조건부

StatusDot

StatusDot 속성
PropType필수 여부
labelstring필수
sizeRuntimeAvatarSize선택
status'online' | 'busy' | 'offline'선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';

import { Avatar as AvatarPrimitive } from 'radix-ui';

export type AvatarSize = 'lg' | 'md' | 'sm';

export type RuntimeAvatarSize = 'xl' | AvatarSize;

export type AvatarType = 'default' | 'image' | 'error';

export type RuntimeAvatarType = Exclude<AvatarType, 'default'>;

export type StatusDotSize = RuntimeAvatarSize;

export type StatusDotStatus = 'online' | 'busy' | 'offline';

export type AvatarBadgeType = 'default' | 'agent' | 'runtime';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type PrimitiveRootProps = Omit<ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'asChild' | 'children' | 'color'>;

type AvatarBaseProps<Size extends RuntimeAvatarSize> = PrimitiveRootProps & DataAttributes & {
    isDeactivated?: boolean;
    isMe?: boolean;
    label: string;
    size?: Size;
};

type DefaultAvatarState = {
    errorTooltip?: never;
    initials: string;
    src?: never;
    type?: 'default';
};

type ImageAvatarState = {
    errorTooltip?: never;
    initials?: never;
    src: string;
    type: 'image';
};

type ErrorAvatarState = {
    errorTooltip: ReactNode;
    initials?: never;
    src?: never;
    type: 'error';
};

export type AvatarProps = AvatarBaseProps<AvatarSize> & (DefaultAvatarState | ImageAvatarState | ErrorAvatarState);

type DefaultAgentAvatarState = {
    errorTooltip?: never;
    src?: never;
    type?: 'default';
};

export type AgentAvatarProps = AvatarBaseProps<AvatarSize> & (DefaultAgentAvatarState | ImageAvatarState | ErrorAvatarState);

type RuntimeImageState = {
    errorTooltip?: never;
    src: string;
    type?: 'image';
};

export type RuntimeAvatarProps = AvatarBaseProps<RuntimeAvatarSize> & (RuntimeImageState | ErrorAvatarState);

export type StatusDotProps = Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'color'> & DataAttributes & {
    label: string;
    size?: StatusDotSize;
    status?: StatusDotStatus;
};

type AvatarBadgeBaseProps = Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'color'> & DataAttributes & {
    isDeactivated?: boolean;
    isMe?: boolean;
    size?: RuntimeAvatarSize;
    status?: StatusDotStatus;
    statusLabel: string;
};

type HumanAvatarBadgeProps = AvatarBadgeBaseProps & {
    initials: string;
    label: string;
    size?: AvatarSize;
    src?: never;
    type?: 'default';
};

type AgentAvatarBadgeProps = AvatarBadgeBaseProps & {
    initials?: never;
    label: string;
    size?: AvatarSize;
    src?: never;
    type: 'agent';
};

type RuntimeAvatarBadgeProps = AvatarBadgeBaseProps & {
    initials?: never;
    label: string;
    size?: RuntimeAvatarSize;
    src: string;
    type: 'runtime';
};

export type AvatarBadgeProps = HumanAvatarBadgeProps | AgentAvatarBadgeProps | RuntimeAvatarBadgeProps;

export type AvatarGroupCountVisibleCount = 2 | 3 | 4 | 5 | 6;

export type AvatarGroupCountProps = Omit<ComponentPropsWithoutRef<'div'>, 'aria-label' | 'aria-labelledby' | 'children' | 'color'> & DataAttributes & {
    avatars?: AvatarGroupCountVisibleCount;
    children: ReactElement<AvatarProps> | readonly ReactElement<AvatarProps>[];
    total: number;
} & ({
    'aria-label': string;
    'aria-labelledby'?: string;
} | {
    'aria-label'?: string;
    'aria-labelledby': string;
});

export declare const AvatarGroupCount: import("react").ForwardRefExoticComponent<AvatarGroupCountProps & import("react").RefAttributes<HTMLDivElement>>;

export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

export declare const AgentAvatar: import("react").ForwardRefExoticComponent<AgentAvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

export declare const RuntimeAvatar: import("react").ForwardRefExoticComponent<RuntimeAvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

export declare const StatusDot: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "color" | "children"> & DataAttributes & {
    label: string;
    size?: StatusDotSize;
    status?: StatusDotStatus;
} & import("react").RefAttributes<HTMLSpanElement>>;

export declare const AvatarBadge: import("react").ForwardRefExoticComponent<AvatarBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;