Show a label on an icon only button

React

Angular

Web Components

<GoabButtonGroup alignment="start">
      <GoabTooltip content="Edit">
        <GoabIconButton icon="pencil" ariaLabel="Edit" />
      </GoabTooltip>
      <GoabTooltip content="Alerts">
        <GoabIconButton icon="notifications" ariaLabel="Alerts" />
      </GoabTooltip>
      <GoabTooltip content="Settings">
        <GoabIconButton icon="settings" ariaLabel="Settings" />
      </GoabTooltip>
    </GoabButtonGroup>

Show a label on an icon-only button using a tooltip to improve discoverability.

When to use

Use this pattern when:

Using icon buttons without visible text labels
Users might not recognize what an icon means
You want to provide context for icon-only actions
Building toolbars or action bars with multiple icon buttons

Considerations

Always include an ariaLabel on icon buttons for screen reader accessibility
Tooltips provide visual context but should not be the only way to understand the action
Keep tooltip content short and descriptive
Group related icon buttons together using a button group
Consider using text labels instead of tooltips for critical actions