Display

Avatar

Image or initials avatar in circle, square, and rounded shapes.

User Representation

Avatars support images, initials, and fallback icons. They automatically handle cross-origin image loading, geometric shapes, and interactive states.

Image Avatar

Using src prop

Initials Avatar

Fallback initials

Rounded Avatar

shape="rounded"

Square Fallback

shape="square"

'use client'

import React from 'react'
import { Stack, Grid, Text, Avatar, Icon } from 'biibaos'
import { User } from 'lucide-react'

export default function App() {
  return (
    <Grid columns={{ base: 1, sm: 2 }} gap={16}>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="lg" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" />
              <Stack direction="column" gap={2}>
                <Text weight="bold" size="sm">Image Avatar</Text>
                <Text size="xs" color="muted">Using src prop</Text>
              </Stack>
            </Stack>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="lg" initials="AW" bg="primary" />
              <Stack direction="column" gap={2}>
                <Text weight="bold" size="sm">Initials Avatar</Text>
                <Text size="xs" color="muted">Fallback initials</Text>
              </Stack>
            </Stack>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="lg" shape="rounded" initials="JD" bg="warning" color="warning-foreground" />
              <Stack direction="column" gap={2}>
                <Text weight="bold" size="sm">Rounded Avatar</Text>
                <Text size="xs" color="muted">shape="rounded"</Text>
              </Stack>
            </Stack>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="lg" shape="square" fallbackIcon={<Icon icon={User} size={20} />} bg="surface-raised" />
              <Stack direction="column" gap={2}>
                <Text weight="bold" size="sm">Square Fallback</Text>
                <Text size="xs" color="muted">shape="square"</Text>
              </Stack>
            </Stack>
          </Grid>
  )
}

Status & Badges

Indicate availability with predefined status dots or overlay customized notification badges.

Online Status

Busy Status

2

Notification Badge

Custom Icon Badge

'use client'

import React from 'react'
import { Stack, Grid, Badge, Text, Avatar, Icon } from 'biibaos'
import { Zap } from 'lucide-react'

export default function App() {
  return (
    <Grid columns={{ base: 1, sm: 2 }} gap={16}>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="md" status="online" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" />
              <Text weight="bold" size="sm">Online Status</Text>
            </Stack>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="md" status="busy" initials="TW" />
              <Text weight="bold" size="sm">Busy Status</Text>
            </Stack>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="md" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" badge={<Badge size="xs" variant="primary" pill>2</Badge>} />
              <Text weight="bold" size="sm">Notification Badge</Text>
            </Stack>
            <Stack align="center" gap={16} style={{ padding: 16, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Avatar size="md" initials="OS" badge={<div style={{ padding: 2, background: 'var(--biiba-surface)', borderRadius: '50%' }}><Icon icon={Zap} size={10} color="var(--biiba-warning)" /></div>} />
              <Text weight="bold" size="sm">Custom Icon Badge</Text>
            </Stack>
          </Grid>
  )
}

Avatar Groups

Stack multiple avatars together. Ideal for team lists and shared document indicators.

Team Members

+2

Dense Grouping

'use client'

import React from 'react'
import { Stack, Grid, Text, Avatar, AvatarGroup } from 'biibaos'

export default function App() {
  return (
    <Grid columns={{ base: 1, md: 2 }} gap={16}>
            <Stack direction="column" gap={16} style={{ padding: 24, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Text weight="bold" size="sm">Team Members</Text>
              <AvatarGroup max={4} size="md">
                <Avatar src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" />
                <Avatar src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" />
                <Avatar initials="JD" bg="primary" />
                <Avatar initials="TW" bg="warning" />
                <Avatar initials="MK" />
                <Avatar initials="AL" />
              </AvatarGroup>
            </Stack>
            <Stack direction="column" gap={16} style={{ padding: 24, background: 'var(--biiba-surface)', borderRadius: 16, border: '1px solid var(--biiba-border)' }}>
              <Text weight="bold" size="sm">Dense Grouping</Text>
              <AvatarGroup spacing={-6} size="sm">
                <Avatar src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" />
                <Avatar initials="JD" bg="primary" />
                <Avatar initials="TW" bg="warning" />
              </AvatarGroup>
            </Stack>
          </Grid>
  )
}

DiceBear Illustrated Avatars

Pass a `dicebear` prop to render beautiful SVG avatars from api.dicebear.com. Choose from 30+ illustration styles. The seed is deterministic — the same seed always produces the same avatar. BiibaOS design tokens (`primary`, `surface`, `bg`) resolve automatically to your live theme colors.

DiceBear Style Explorer

Choose a style on the left, pick a preset on the right, click to copy code.

232 presets · 12 styles
Style
BG
232 presetsClick to preview & copy code
'use client'

import React from 'react'
import { Avatar, AvatarGroup, Badge, Stack, Text, Divider } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={28}>

      {/* 1. Style Gallery — same seed, different styles */}
      <Stack direction="column" gap={12}>
        <Text size="xs" weight="black" color="muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>
          Style Gallery
        </Text>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
          {['bottts-neutral', 'adventurer', 'micah', 'lorelei', 'pixel-art', 'fun-emoji', 'big-smile', 'thumbs'].map(style => (
            <Stack key={style} align="center" direction="column" gap={8}>
              <Avatar size="lg" alt={style} dicebear={{ style, seed: 'biibaos-demo', scale: 85 }} />
              <Text size="xs" color="muted">{style}</Text>
            </Stack>
          ))}
        </div>
      </Stack>

      <Divider />

      {/* 2. Theme Color Backgrounds — use BiibaOS token names directly */}
      <Stack direction="column" gap={12}>
        <Text size="xs" weight="black" color="muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>
          Theme Color Backgrounds
        </Text>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <Avatar size="lg" alt="primary"   dicebear={{ style: 'bottts-neutral', seed: 'alpha', backgroundColor: 'primary',   scale: 85 }} />
          <Avatar size="lg" alt="secondary" dicebear={{ style: 'bottts-neutral', seed: 'beta',  backgroundColor: 'secondary', scale: 85 }} />
          <Avatar size="lg" alt="surface"   dicebear={{ style: 'bottts-neutral', seed: 'gamma', backgroundColor: 'surface',   scale: 85 }} />
          {/* Raw hex also works: */}
          <Avatar size="lg" alt="hex"       dicebear={{ style: 'bottts-neutral', seed: 'delta', backgroundColor: '6366f1',    scale: 85 }} />
        </div>
      </Stack>

      <Divider />

      {/* 3. Sizes */}
      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-end', flexWrap: 'wrap' }}>
        {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map(size => (
          <Stack key={size} align="center" direction="column" gap={6}>
            <Avatar size={size} alt={size} dicebear={{ style: 'micah', seed: 'sierra-team' }} />
            <Text size="xs" color="muted">{size}</Text>
          </Stack>
        ))}
        <Stack align="center" direction="column" gap={6}>
          <Avatar size="lg" shape="square" alt="square" dicebear={{ style: 'bottts-neutral', seed: 'biibaos', radius: 8 }} />
          <Text size="xs" color="muted">square</Text>
        </Stack>
      </div>

      <Divider />

      {/* 4. Status & Notification Badges — still work on DiceBear avatars */}
      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
        <Avatar size="md" status="online" dicebear={{ style: 'adventurer', seed: 'alex-morgan' }} />
        <Avatar size="md" status="busy"   dicebear={{ style: 'adventurer', seed: 'maria-chen' }} />
        <Avatar size="md" status="away"   dicebear={{ style: 'adventurer', seed: 'jin-park' }} />
        <Avatar
          size="md"
          badge={<Badge size="xs" variant="primary" pill>3</Badge>}
          dicebear={{ style: 'lorelei', seed: 'sophie-ray' }}
        />
      </div>

      <Divider />

      {/* 5. AvatarGroup with DiceBear */}
      <AvatarGroup max={5} size="md">
        {['alex-morgan', 'maria-chen', 'jin-park', 'sophie-ray', 'tom-mills', 'lena-nova'].map(seed => (
          <Avatar key={seed} alt={seed} dicebear={{ style: 'bottts-neutral', seed, scale: 85 }} />
        ))}
      </AvatarGroup>

    </Stack>
  )
}

Properties

PropTypeDefaultDescription
srcstring—Resource URL of the avatar image
altstring—Accessibility text description for the avatar image
initialsstring—Configures the initials option — also used as the DiceBear seed fallback when dicebear.seed is omitted
dicebearDiceBearConfig—Renders an SVG illustration from api.dicebear.com. When set, takes priority over initials (but not over src). Supports style, seed, backgroundColor (accepts BiibaOS token names like "primary"), scale, rotate, flip, radius, and extra options.
sizeBiibaSize'sm'Predefined size scaling preset
shape'circle' | 'square' | 'rounded'—Visual shape corner style (circle, rounded, square)
badgeReact.ReactNode—Badge/indicator overlaid at the bottom-right
status'online' | 'offline' | 'busy' | 'away'—Status dot color — shows a small circle at bottom-right
onClick() => void—Click handler — makes avatar interactive
fallbackIconReact.ReactNode—Fallback icon if no src and no initials
bgstring—Background color of the avatar (ignored when dicebear is set)
colorstring—Text/Icon color of the avatar
maxnumber—AvatarGroup: maximum number of avatars to show before overflow count
spacingnumber—AvatarGroup: gap between overlapping avatars (negative = overlap)

Previous

Icon

Next

Card