Skip to content

Primer/Interface guidelines

Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

Avatar

Avatar is an image that represents a user or organization.

On this page
Work in progressWe are currently transferring the Rails documentation for Avatar from a different site to this page. To view the original documentation, please visit the Primer ViewComponents documentation for Avatar.
v0.1.5BetaNot reviewed for accessibility

Description

Avatar can be used to represent users and organizations on GitHub.

  • Use the default circle avatar for users, and the square shape for organizations or any other non-human avatars.
  • By default, Avatar will render a static <img>. To have Avatar function as a link, set the href which will wrap the <img> in a <a>.
  • Set size to update the height and width of the Avatar in pixels.
  • To stack multiple avatars together, use AvatarStack.

Arguments

NameDefaultDescription
src

N/A

String

The source url of the avatar image.

alt

N/A

String

Passed through to alt on img tag.

size

20

Integer

One of 16, 20, 24, 32, 40, 48, or 80.

shape

:circle

Symbol

Shape of the avatar. One of :circle or :square.

href

nil

String

The URL to link to. If used, component will be wrapped by an <a> tag.

system_arguments

N/A

Hash

System arguments

Examples

View in Lookbook