Profile with Avatar Edit Button The avatar can display an edit button on hover and focus.
Important Notes: Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed in via the edit button's attributes prop. See Button element docs for more info.
Demo
Twig
{% set edit_button %}
  {% include '@bolt-components-profile/profile-avatar-edit-button.twig' with {
    content: 'Edit Text'|t,
    attributes: {
      type: 'button',
      class: 'js-button-edit',
      'data-foo': 'bar'
    },
  } only %}
{% endset %}
{% include '@bolt-components-profile/profile.twig' with {
  name: {
    content: '<strong>First Last</strong> (@username)',
    tag: 'h2',
  },
  job_title: 'Lead System Architect',
  location: 'United States',
  avatar_edit_button: edit_button,
} only %}
HTML
Not available in plain HTML. Please use Twig.