Avatar

Avatar shows a photo, or the initials of name while the photo loads or when there is none. AvatarGroup overlaps several avatars and adds a “+N” count.

import { Avatar, AvatarGroup } from '@beyul/sulmu-ui'

Source · Figma

Examples

Sizes

xs is 20px, sm 24, md 32, lg 40 and xl 64.

HS

HS

HS

HS

HS

import { Avatar, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center">
      <Avatar size="xs" name="Howard Sheldon" />
      <Avatar size="sm" name="Howard Sheldon" />
      <Avatar size="md" name="Howard Sheldon" />
      <Avatar size="lg" name="Howard Sheldon" />
      <Avatar size="xl" name="Howard Sheldon" />
    </Flex>
  )
}

Status

JM

RS

HG

import { Avatar, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={4} align="center">
      <Avatar size="lg" name="Jane Menefee" status="online" />
      <Avatar size="lg" name="Ruben Stanton" status="away" />
      <Avatar size="lg" name="Hanna Gouse" status="offline" />
    </Flex>
  )
}

Group

max limits how many avatars are shown. total is the real count when it is larger than the number of avatars passed, for example 30 people online with 4 shown.

JM

SJ

RS

PB

+26

import { Avatar, AvatarGroup } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <AvatarGroup max={4} total={30}>
      <Avatar size="sm" name="Jane Menefee" />
      <Avatar size="sm" name="Sandra Johnson" />
      <Avatar size="sm" name="Ruben Stanton" />
      <Avatar size="sm" name="Phillip Botosh" />
      <Avatar size="sm" name="Aspen Dokidis" />
    </AvatarGroup>
  )
}

Props

Avatar

Prop	Type	Default	Description
name*	string	-	Person or organisation name. Used for the initials and the image alt text.
src	string	-	Photo URL. Initials show while it loads or if it fails.
size	"xs" | "sm" | "md" | "lg" | "xl"	md	xs 20, sm 24, md 32, lg 40, xl 64. Default: md.
status	"online" | "away" | "offline"	-	Presence dot.

AvatarGroup

Prop	Type	Default	Description
max	number	-	Show at most this many avatars, then "+N".
total	number	-	Total count when it is larger than the avatars passed (e.g. 30 online, 4 shown).

Accessibility and usage

• name is required. It gives the initials (the first letters of the first two words) and the alt text of the photo.
• Pass src for a photo. The initials stay visible until the image has loaded, and remain if it fails.
• The status dot is announced as “online”, “away” or “offline”.