SGDS Icon Button Component Skill

<sgds-icon-button> is an icon-only interactive button from the SGDS icon registry. Prefer it over <sgds-button> with a slotted icon when no visible text label is needed — it provides correct semantics and enforces accessible labelling via ariaLabel.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Icon button or regular button?

• Visible text label → use <sgds-button> with icon slots
• Icon only (no visible label) → <sgds-icon-button> (always add ariaLabel)