Skip to content

Avatar

Use avatars to represent users or organizations.
  • Beta
  • Not reviewed for accessibility

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.

Accessibility

Images should have text alternatives that describe the information or function represented. If the avatar functions as a link, provide alt text that helps convey the function. For instance, if Avatar is a link to a user profile, the alt attribute should be @kittenuser profile rather than @kittenuser. Learn more about best image practices (WAI Images)

Arguments

NameTypeDefaultDescription
srcStringN/AThe source url of the avatar image.
altStringN/APassed through to alt on img tag.
sizeInteger20One of 16, 20, 24, 32, 40, 48, or 80.
shapeSymbol:circleShape of the avatar. One of :circle or :square.
hrefStringnilThe URL to link to. If used, component will be wrapped by an <a> tag.
system_argumentsHashN/ASystem arguments

Examples

Default

@kittenuser
<%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")) %>

Square

@kittenuser
<%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", shape: :square)) %>
@kittenuser profile
<%= render(Primer::Beta::Avatar.new(href: "#", src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser profile")) %>

With size

@kittenuser@kittenuser@kittenuser@kittenuser