Skip to content
Site volume
Colourway

Components

Avatar

A person's picture or initials on a slab disc; a group overlaps them and counts the rest.

  • Experimental
  • Reading layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/avatar
On this page

Avatar shows a person: their picture in a 2 px ink rule, or their initials in Anybody 900 on a slab disc. People never wear a line ink, because colour means a line of work. Sizes 32, 40, 56 and 80; shape="square" for teams and products. AvatarGroup overlaps its avatars by 8 px, rings each in the surface and ends with a Count for the rest.

Example#

Look of this example
1 more
Live render of examples/avatar/basic.tsx

Usage#

Use an avatar to show a person: a reviewer, an author, a client contact. A picture prints in a 2 px ink rule; without one, their initials print in Anybody 900 on a slab disc.

  • Sizes. 32, 40, 56 and 80 px; shape="square" for teams and products.
  • Name. name is required: it is the alt text and the source of the initials. decorative empties the alt when the name is printed beside it.
  • Groups. AvatarGroup overlaps avatars by 8 px, rings each in the surface and ends with a Count for the rest.
  • No line inks on people. Colour means a line of work; a person is not one.

Anatomy#

1 more
The parts of examples/avatar/basic.tsx, numbered:
  1. InitialsAnybody 900 on the slab.data-mk-part="initials"
  2. Group itemRinged in the surface, overlapping by 8 px.data-mk-part="item"
  3. MoreA Count for the rest.data-mk-part="more"

Volume#

Reading layer: identical at every volume.

  • Quiet

    1 more

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    1 more

    The site default. Art on its own plates, one display moment per view.

  • Press

    1 more

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    1 more

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Use real, fictional-in-docs names: Jordan Reyes, Sam Okafor.
  • Photos only with the person's permission.

Do and don't#

Do

Initials on the slab.

Don't

A person in a line's ink.

Magenta means Custom apps. Putting a person in it says they are a line of work.

Accessibility#

  • name is required: it is the picture's alt text or the initials disc's name. Beside the visible name pass decorative.
  • Initials print at 18 px or more, where APCA allows weight 900.
  • A group is named by its people; the "+2" count says "2 more".

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-on-slab--mk-slablabel 16.49:1 · Lc 98.7, passes 16.21:1 · Lc 95.1, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
name requiredstringnoneThe person's name: alt text, or the initials disc's name.
srcstringnone
sizeAvatarSizenone
shape"circle" | "square"none
decorativebooleannoneBeside the visible name: the image and initials are hidden from assistive tech.

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from AvatarProps in packages/overprint-react/src/reading/avatar/avatar.tsx.

Tokens#

System tokens (8)

Its own properties (6)

  • --mk-avatar-leading
  • --mk-avatar-overlap
  • --mk-avatar-size
  • --mk-avatar-tracking
  • --mk-avatar-type
  • --mk-avatar-wdth

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • MinorreactBreadcrumbs, Pagination (with paginationRange), Count, ProgressBar (bar, segments, indeterminate), Avatar and AvatarGroup, Tick, EmptyState, Kbd, Skeleton and Loader. Read the whole entry