Component field guide

WelkAvatar

A compact portrait with a comic outline. Supply a custom src or icon, or choose a bundled portrait. The alt text supplies its accessible name. Custom image loading uses native browser behavior without an automatic fallback.

Usage

import { WelkAvatar } from "@welkui/react";

<WelkAvatar variant="female-admin" alt="Mission leader" size="lg" />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

• user: default portrait.
• male-user / female-user: user portraits.
• male-admin / female-admin: administrator portraits.
• All portraits support sm, md and lg sizes.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

user

Bundled portrait; no remote image request is needed.

Key propsvariant="user"

male-user

Bundled portrait; no remote image request is needed.

Key propsvariant="male-user"

female-user

Bundled portrait; no remote image request is needed.

Key propsvariant="female-user"

male-admin

Bundled portrait; no remote image request is needed.

Key propsvariant="male-admin"

female-admin

Bundled portrait; no remote image request is needed.

Key propsvariant="female-admin"

Size sm

Choose a size appropriate to lists, headers, or profile summaries.

Key propssize="sm"

Size md

Choose a size appropriate to lists, headers, or profile summaries.

Key propssize="md"

Size lg

Choose a size appropriate to lists, headers, or profile summaries.

Key propssize="lg"

Custom image

A src overrides bundled artwork. Hover to enlarge.

Key propssrc={superman} growOnHover

Custom icon and background

An icon can replace the portrait when src is omitted.

W

Key propsicon={<span>W</span>} color="#82caff"

Usage notes and accessibility

• Use a person's name or a meaningful identity as alt. The outer span is the accessible image; the internal portrait is decorative to avoid duplicate announcements.
• src has priority over icon, and icon has priority over the bundled variant. A custom image URL does not have a library-managed error fallback.
• Use a consistent size for rows in a list. Hover growth is decorative and should not be the only indicator that an adjacent action is available.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

Native props and refs

Inherits native span attributes except children and color; forwards a span ref.