{
    "componentChunkName": "component---src-layouts-rails-component-layout-tsx",
    "path": "/components/avatar/rails",
    "result": {"data":{"primerRailsVersion":{"version":"0.1.9"},"sitePage":{"path":"/components/avatar","context":{"frontmatter":{"title":"Avatar","description":"Avatar is an image that represents a user or organization.","reactId":"avatar","railsId":"Primer::Beta::Avatar","figmaId":"avatar"}}},"railsComponent":{"name":"Avatar","railsId":"Primer::Beta::Avatar","description":"`Avatar` can be used to represent users and organizations on GitHub.\n\n- Use the default circle avatar for users, and the square shape\nfor organizations or any other non-human avatars.\n- 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>`.\n- Set `size` to update the height and width of the `Avatar` in pixels.\n- To stack multiple avatars together, use {{#link_to_component}}Primer::Beta::AvatarStack{{/link_to_component}}.","status":"beta","a11y_reviewed":false,"short_name":"Avatar","is_form_component":false,"is_published":true,"props":[{"name":"src","type":"String","description":"The source url of the avatar image.","default":"N/A"},{"name":"alt","type":"String","description":"Passed through to alt on img tag.","default":"N/A"},{"name":"size","type":"Integer","description":"One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`.","default":"`20`"},{"name":"shape","type":"Symbol","description":"Shape of the avatar. One of `:circle` or `:square`.","default":"`:circle`"},{"name":"href","type":"String","description":"The URL to link to. If used, component will be wrapped by an `<a>` tag.","default":"`nil`"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[],"methods":[],"previews":[{"name":"playground","preview_path":"primer/beta/avatar/playground"},{"name":"default","preview_path":"primer/beta/avatar/default"},{"name":"as_link","preview_path":"primer/beta/avatar/as_link"},{"name":"size_16","preview_path":"primer/beta/avatar/size_16"},{"name":"size_20","preview_path":"primer/beta/avatar/size_20"},{"name":"size_24","preview_path":"primer/beta/avatar/size_24"},{"name":"size_32","preview_path":"primer/beta/avatar/size_32"},{"name":"size_40","preview_path":"primer/beta/avatar/size_40"},{"name":"size_48","preview_path":"primer/beta/avatar/size_48"},{"name":"size_80","preview_path":"primer/beta/avatar/size_80"},{"name":"shape_circle","preview_path":"primer/beta/avatar/shape_circle"},{"name":"shape_square","preview_path":"primer/beta/avatar/shape_square"}],"subcomponents":[]}},"pageContext":{"componentId":"Primer::Beta::Avatar","parentPath":"/components/avatar"}},
    "staticQueryHashes": ["2468112454","2580293464","2745756513","2790671566","3907230164"]}