Avatar

Exports

Import these components from @mbsw/ui.

AgentAvatar
Avatar
AvatarBadge
AvatarGroupCount
RuntimeAvatar
StatusDot

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

AgentAvatar

AgentAvatar props
PropTypeRequirement
isDeactivatedbooleanOptional
isMebooleanOptional
labelstringRequired
size'lg' | 'md' | 'sm'Optional
errorTooltipReactNodeConditional
srcstringConditional
type"default" | "image" | "error"Conditional

Avatar

Avatar props
PropTypeRequirement
isDeactivatedbooleanOptional
isMebooleanOptional
labelstringRequired
size'lg' | 'md' | 'sm'Optional
errorTooltipReactNodeConditional
initialsstringConditional
srcstringConditional
type"image" | "error" | "default"Conditional

AvatarBadge

AvatarBadge props
PropTypeRequirement
isDeactivatedbooleanOptional
isMebooleanOptional
size"lg" | "md" | "sm" | RuntimeAvatarSizeOptional
status'online' | 'busy' | 'offline'Optional
statusLabelstringRequired
initialsstringConditional
labelstringRequired
srcstringConditional
type"default" | "agent" | "runtime"Conditional

AvatarGroupCount

AvatarGroupCount props
PropTypeRequirement
avatars2 | 3 | 4 | 5 | 6Optional
childrenReactElement<AvatarProps, string | JSXElementConstructor<any>> | readonly ReactElement<AvatarProps, string | JSXElementConstructor<any>>[]Required
totalnumberRequired
aria-labelstringConditional
aria-labelledbystringConditional

RuntimeAvatar

RuntimeAvatar props
PropTypeRequirement
isDeactivatedbooleanOptional
isMebooleanOptional
labelstringRequired
sizeRuntimeAvatarSizeOptional
errorTooltipReactNodeConditional
srcstringConditional
type"error" | "image"Conditional

StatusDot

StatusDot props
PropTypeRequirement
labelstringRequired
sizeRuntimeAvatarSizeOptional
status'online' | 'busy' | 'offline'Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

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>>;