Avatar Action Button

<div class="pb--doc-demo-row">

  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
  }) %>

</div>

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "bottom_left"
  }) %>

  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "bottom_right"
  }) %>

    <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "top_left"
  }) %>

    <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      placement: "top_right"
  }) %>

</div>

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Add Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Add Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      action: "add",
  }) %>

  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Remove Sophia Carden",
      name: "Sophia Carden",
      image_alt: "Remove Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      action: "remove",
  }) %>

</div>

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Alert Sophia Carden",
      name: "Sophia Carden",
      id: "clickable",
      link_url: "http://www.google.com",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
  }) %>

  <%= javascript_tag do %>
    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
  <% end %>

</div>

<div class="pb--doc-demo-row">
  
  <%= pb_rails("avatar_action_button", props: {
      link_aria_label: "Sophia Carden",
      name: "Sophia Carden",
      link_url: "http://www.google.com",
      image_alt: "Sophia Carden",
      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
      tooltip_text: "Tooltip Text",
      tooltip_id: "avatar_1",
  }) %>

</div>