Skip to content

Avatars

Experimental

Avatars is used to render one or more ProfilePreviews in a grid, e.g., authors of a blog posts or speakers at an event. It is an alternative to using Names.

Examples

In the first example we render a few avatars with default alignment start (left):

Note that the components provided through the name prop need to align with Avatars aligment.

In this example we align center:

In this example we align end (right):

This is an example with many avatars:

System props

Avatars supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
valuesArray of AvatarSee below.
alignstart, center or endstartAlignment of profile (responsive).

Avatar

This is a subset of Profile from ProfilePreview plus id and href:

NameTypeDefaultRequiredDescription
idStringIdentifier, e.g., the node ID generated by Gatsby.
avatarNodeAvatar image (composition pattern).
nameNodeFull name (composition pattern). You need to make sure that this component aligns with above align prop.
hrefStringPath to which the avatar should link.

Variants

Avatars does not support variants. If you customize Theme UI Link via styles.a, this will also affect all links in Avatars.

Visual regression testing

The following URLs can be used for visual regression testing: