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 { Avatar, Grid, Stack, Text, Icon } from 'biibaos'
import { User } from 'lucide-react'

export default function AvatarUsage() {
  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

Notification Badge

Custom Icon Badge

'use client'

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

export default function AvatarStatus() {
  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

Dense Grouping

'use client'

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

export default function AvatarGrouping() {
  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>
  )
}

Properties

Prop	Type	Default	Description
`src`	`string`	—	Resource URL of the avatar image
`alt`	`string`	—	Accessibility text description for the avatar image
`initials`	`string`	—	Configures the initials option
`size`	`BiibaSize`	'sm'	Predefined size scaling preset
`shape`	`'circle' \| 'square' \| 'rounded'`	—	Visual shape corner style (circle, rounded, square)
`badge`	`React.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
`fallbackIcon`	`React.ReactNode`	—	Fallback icon if no src and no initials
`bg`	`string`	—	Background color of the avatar
`color`	`string`	—	Text/Icon color of the avatar
`children`	`React.ReactNode`	—	Main descriptive text or overlay children layout
`max`	`number`	—	Maximum numerical selectable bound
`spacing`	`number`	—	Gap between overlapping avatars (negative = overlap)

Icon

Card