Back to all examples

Button with Icon

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

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”