{
    "componentChunkName": "component---src-layouts-rails-component-layout-tsx",
    "path": "/components/avatar/rails",
    "result": {"data":{"primerRailsVersion":{"version":"0.1.5"},"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","figmaUrl":"https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=13007%3A40428"}}},"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","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":"/lookbook/preview/primer/beta/avatar/playground","inspect_path":"/lookbook/inspect/primer/beta/avatar/playground"},{"name":"default","preview_path":"/lookbook/preview/primer/beta/avatar/default","inspect_path":"/lookbook/inspect/primer/beta/avatar/default"},{"name":"as_link","preview_path":"/lookbook/preview/primer/beta/avatar/as_link","inspect_path":"/lookbook/inspect/primer/beta/avatar/as_link"},{"name":"shape","preview_path":"/lookbook/preview/primer/beta/avatar/shape","inspect_path":"/lookbook/inspect/primer/beta/avatar/shape"},{"name":"sizes","preview_path":"/lookbook/preview/primer/beta/avatar/sizes","inspect_path":"/lookbook/inspect/primer/beta/avatar/sizes"}],"subcomponents":[]}},"pageContext":{"componentId":"Primer::Beta::Avatar","parentPath":"/components/avatar"}},
    "staticQueryHashes": ["2468112454","2580293464","2745756513","2790671566","3907230164"]}