Skip to content

Avatar

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

  • Use the default round avatar for users, and the square argument 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)

Examples

Default

@kittenuser
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>

Square

@kittenuser
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
@kittenuser profile
<%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>

With size

@kittenuser@kittenuser@kittenuser@kittenuser@kittenuser@kittenuser
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 28)) %>
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 36)) %>

Arguments

NameTypeDefaultDescription
srcStringN/AThe source url of the avatar image.
altStringN/APassed through to alt on img tag.
sizeInteger20Adds the avatar-small class if less than 24.
squareBooleanfalseUsed to create a square avatar.
hrefStringnilThe URL to link to. If used, component will be wrapped by an <a> tag.
system_argumentsHashN/ASystem arguments