Avatar | RiseUI

Profile image, initials, or custom child — HeroUI-aligned sizes, colors, and soft variant.

Usage

Default story: three columns — text/icon fallbacks, `img.heroui.chat` portraits, and asset swatches — matching Hero Storybook `Template`.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Column(
      children: [
        RiseAvatar(name: 'PG'),
        RiseAvatar(name: 'JR'),
        RiseAvatar(
          child: Icon(Icons.person_outline, size: RiseAvatar.iconSizeFor(RiseAvatarSize.md)),
        ),
      ],
    ),
    // + chat portraits + heroui-assets columns — see docs embed
  ],
)

With delay

Deferred image load (`WithDelay`): placeholder initials, then the same portrait as Hero (`u=3`).

// After 300ms timer — same portrait as Hero `WithDelay`
RiseAvatar(
  image: NetworkImage('https://img.heroui.chat/image/avatar?w=400&h=400&u=3'),
  name: 'John',
)

Sizes

`sm` · `md` · `lg` — `size-8` / `size-10` / `size-12` with chat portraits (`Sizes`).

Wrap(
  spacing: 16,
  children: [
    RiseAvatar(
      image: NetworkImage('https://img.heroui.chat/image/avatar?w=400&h=400&u=3'),
      name: 'SM',
      size: RiseAvatarSize.sm,
    ),
    RiseAvatar(
      image: NetworkImage('https://img.heroui.chat/image/avatar?w=400&h=400&u=4'),
      name: 'MD',
      size: RiseAvatarSize.md,
    ),
    RiseAvatar(
      image: NetworkImage('https://img.heroui.chat/image/avatar?w=400&h=400&u=5'),
      name: 'LG',
      size: RiseAvatarSize.lg,
    ),
  ],
)

Colors

Solid fallbacks: `DF` `AC` `SC` `WR` `DG` — `WithColors` in Hero stories.

Wrap(
  spacing: 16,
  children: [
    RiseAvatar(name: 'DF', color: RiseAvatarColor.standard),
    RiseAvatar(name: 'AC', color: RiseAvatarColor.accent),
    RiseAvatar(name: 'SC', color: RiseAvatarColor.success),
    RiseAvatar(name: 'WR', color: RiseAvatarColor.warning),
    RiseAvatar(name: 'DG', color: RiseAvatarColor.danger),
  ],
)

Variants

Matrix: letter / letter soft / icon / icon soft / img × accent · default · success · warning · danger (`Variants`).

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    RiseSeparator(tone: RiseSeparatorTone.default_),
    Row(
      children: [
        RiseAvatar(name: 'AG', color: RiseAvatarColor.accent),
        // … kHeroAvatarColorColumnOrder × letter | soft | icon | img rows
      ],
    ),
  ],
)

Fallback

Text · icon · broken URL · gradient custom fallback (`Fallback`).

Wrap(
  spacing: 16,
  children: [
    RiseAvatar(name: 'JD'),
    RiseAvatar(
      child: Icon(Icons.person_outline, size: RiseAvatar.iconSizeFor(RiseAvatarSize.md)),
    ),
    RiseAvatar(
      image: NetworkImage('https://invalid-url-to-show-fallback.com/image.jpg'),
      name: 'NA',
    ),
  ],
)

Avatar group

Overlapping stack, `ring-background`, portrait + circle rows + `+5` (`Group`).

RiseAvatarGroup(
  children: [
    RiseAvatar(image: NetworkImage('https://img.heroui.chat/image/avatar?w=400&h=400&u=3'), name: 'J'),
    RiseAvatar(image: NetworkImage('https://img.heroui.chat/image/avatar?w=400&h=400&u=5'), name: 'K'),
    const RiseAvatar(name: '+5', color: RiseAvatarColor.standard),
  ],
)

Custom content

Accent soft slot with icon (`Icon` inherits fallback colors from `color` / `variant`).

RiseAvatar(
  color: RiseAvatarColor.accent,
  variant: RiseAvatarVariant.soft,
  child: Icon(Icons.auto_awesome, color: rise.accent),
)