Button with Icon

<GoabButtonGroup>
      <GoabButton leadingIcon="arrow-back">Go back</GoabButton>
      <GoabButton trailingIcon="arrow-forward">Continue</GoabButton>
      <GoabButton type="secondary" leadingIcon="add">Add item</GoabButton>
    </GoabButtonGroup>

<goab-button-group>
  <goab-button leadingIcon="arrow-back">Go back</goab-button>
  <goab-button trailingIcon="arrow-forward">Continue</goab-button>
  <goab-button type="secondary" leadingIcon="add">Add item</goab-button>
</goab-button-group>

<goa-button-group>
  <goa-button version="2" leadingicon="arrow-back">Go back</goa-button>
  <goa-button version="2" trailingicon="arrow-forward">Continue</goa-button>
  <goa-button version="2" type="secondary" leadingicon="add">Add item</goa-button>
</goa-button-group>

When using icons in buttons, the button text provides the accessible name. The icon is decorative and should be hidden from screen readers with aria-hidden.

Shows how to add leading or trailing icons to buttons for enhanced visual communication.

Use cases

Back navigation buttons with arrow icon
Add buttons with plus icon
Download buttons with download icon
External link buttons with external icon

Considerations

Keep icon and text semantically aligned
Don’t use icons just for decoration
Leading icons for actions that “go back” or “add”
Trailing icons for actions that “go forward” or “external”

View old example docs