@antadesign/anta
    Preparing search index...

    Interface AvatarProps

    interface AvatarProps {
        seed?: string;
        name?: string;
        src?: string;
        size?: "small" | "medium" | "large" | number;
        badge?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        round?: boolean
        | number
        | string;
        generator?: AvatarGenConfig;
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy

    Indexable

    • [key: `data-${string}`]: unknown
    • [key: `aria-${string}`]: unknown
    Index
    seed? name? src? size? badge? round? generator? className? style? id? title? slot? tabIndex? key?
    seed?: string

    Alphanumeric seed that deterministically drives the generated userpic. The same seed always renders the same avatar. Falls back to name when omitted, so a stable user id or name is a good value.

    name?: string

    Person or entity name. Supplies the initials fallback (up to 3 letters from the first 3 words) and the accessible name, and seeds generation when seed is absent.

    src?: string

    Image URL. When set, the image is shown instead of a generated userpic, cropped to fill the container.

    size?: "small" | "medium" | "large" | number

    Size of the square container. A number is a pixel size.

    medium
    badge?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Corner badge, colored by tone. Pass a named tone or any literal CSS color; the application decides what each tone means (success for online, critical for busy, neutral for offline). Omit for no badge.

    round?: boolean | number | string

    Fully-round (circular) frame. Pass a number (px) or a CSS length string for a custom radius instead.

    generator?: AvatarGenConfig

    Brand generation constraints — each dimension is OFF / ANY / RANGE / LIST. Colors cap OKLCH ranges or pass an explicit palette. Omit for the default varied figure. Define one config for the app and reuse it across avatars.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties