UI component
Avatar
Avatar displays profile imagery with graceful fallback text, predictable sizing, and optional visibility access checks.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Avatar } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
ARsm
JKfallback
RKcustom
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| src | Supplies the avatar image URL when media is available. |
| alt | Provides descriptive text and initials source for fallback rendering. |
| fallback | Overrides derived initials with custom fallback content. |
| size | Applies sm, md, or lg dimensions with token-friendly utility classes. |
| imageClassName and fallbackClassName | Lets consumers style image and fallback surfaces independently. |
| accessRequirements and resolveAccess | Keeps visibility injectable through host-defined access rules. |
Accessibility
Alt text is forwarded to the underlying avatar image, and fallback content ensures a visible representation when image media is unavailable.
Optional access rules
When access rules are provided, Avatar returns null only when view access is denied; write-only requirements keep it visible by convention.