Docs

This page isn't translated yet

Avatar

Round profile images.

On this page

Avatar renders a profile image at the avatar size from the tokens, cropped to fill, with the avatar border, radius and shadow. Use it for authors, team members and testimonials.

Avatar
Maya Lindqvist
import { Avatar } from '@systhemaui/next'

export default function Demo() {
  return <Avatar src="/demo-assets/avatar-1.webp" alt="Maya Lindqvist" sizes="64px" />
}

ImportLink to this section

import { Avatar } from '@systhemaui/next'

In a React app without Next.js, import it from @systhemaui/react. There it renders a plain <img>.

ExamplesLink to this section

Group of avatarsLink to this section

Avatars are inline-block, so they line up in a row. Overlap them with a negative margin for a compact group.

Avatar group
Maya LindqvistDaniel OkaforSara Nyberg
Maya LindqvistDaniel OkaforSara Nyberg
import { Avatar } from '@systhemaui/next'

const team = [
  { src: '/demo-assets/avatar-1.webp', name: 'Maya Lindqvist' },
  { src: '/demo-assets/avatar-2.webp', name: 'Daniel Okafor' },
  { src: '/demo-assets/avatar-1.webp', name: 'Sara Nyberg' },
]

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-10">
      <div className="flex items-center gap-3">
        {team.map((person) => (
          <Avatar key={person.name} src={person.src} alt={person.name} sizes="64px" />
        ))}
      </div>
      <div className="flex items-center">
        {team.map((person) => (
          <Avatar
            key={person.name}
            src={person.src}
            alt={person.name}
            sizes="64px"
            className="-ml-4 first:ml-0"
          />
        ))}
      </div>
    </div>
  )
}

With a nameLink to this section

Next to visible text that names the person, the avatar is decorative: leave alt empty so the name is not read twice.

Author byline

Daniel Okafor

Frontend lead, Northwind

import { Avatar, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar src="/demo-assets/avatar-2.webp" alt="" sizes="64px" />
      <div>
        <Paragraph className="font-semibold">Daniel Okafor</Paragraph>
        <Paragraph type="small">Frontend lead, Northwind</Paragraph>
      </div>
    </div>
  )
}

Another sizeLink to this section

The size comes from --avatar-size. Override it per instance with a size utility, or change the avatar tokens for the whole project.

Sizes
import { Avatar } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex items-end gap-4">
      <Avatar src="/demo-assets/avatar-1.webp" alt="" sizes="32px" className="size-8" />
      <Avatar src="/demo-assets/avatar-1.webp" alt="" sizes="64px" />
      <Avatar src="/demo-assets/avatar-1.webp" alt="" sizes="96px" className="size-24" />
    </div>
  )
}

PropsLink to this section

Avatar takes every <img> attribute (in Next.js, every next/image prop). alt defaults to '', loading to 'lazy' and decoding to 'async'.

PropTypeDefaultDescription
classNamestring-
…and all <img> attributes

HTML and CSSLink to this section

Without React, add the avatar class to an <img>:

<img class="avatar" src="/avatar.webp" alt="Maya Lindqvist" width="64" height="64" loading="lazy" />

Size, radius, border and shadow come from the avatar tokens (--avatar-size, --avatar-border-radius, --avatar-border-width, --color-avatar-border, --color-avatar-shadow).

ClassStyles
avatar--tw-shadow-color: var(--color-avatar-shadow);display: inline-block;object-fit: cover;object-position: center;overflow: hidden;box-shadow: var(--avatar-shadow-x) var(--avatar-shadow-y) var(--avatar-shadow-blur) var(--avatar-shadow-spread) var(--tw-shadow-color);width: var(--avatar-size);height: var(--avatar-size);border-radius: var(--avatar-border-radius);border-width: var(--avatar-border-width);border-color: var(--color-avatar-border);

Next.jsLink to this section

The @systhemaui/next Avatar renders next/image, so the file is resized and served in a modern format. It defaults width and height to 64 and loading to 'lazy'.

import { Avatar } from '@systhemaui/next'

export function AuthorAvatar({ src, name }: { src: string; name: string }) {
  return <Avatar src={src} alt={name} width={64} height={64} sizes="64px" />
}
PropTypeDefaultDescription
classNamestring-
…and props from next
…and all inherited HTML attributes

AccessibilityLink to this section

  • Write the person's name in alt when the avatar stands alone. Leave it empty when the name is in the text next to it.
  • An avatar is an image, not a control. Wrap it in a Link when it should lead to a profile, and give the link a name.

RelatedLink to this section