<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>