2.9.7






Avatar

Default






Close
<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "xs",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "md",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "offline"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "lg",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "xl",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>
Monogram


Close
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl" }) %>
Status





Close
<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg"
  }) %>

<br>

  <%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

  <br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

  <br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "offline"
  }) %>
Available Props
id
data
classname
aria
children
image_url
name
size
status