SGDS Close Button Component Skill

<sgds-close-button> renders a standardised close/dismiss button (× icon). It is used internally by <sgds-alert>, <sgds-drawer>, <sgds-modal>, <sgds-toast>, <sgds-badge>, and <sgds-file-upload>. Use it directly only when building custom dismissible UI that those components do not cover.

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

Does a built-in component already handle this?

• Dismissible alert → use <sgds-alert dismissible> instead
• Dismissible drawer / modal / toast → those components have their own built-in close button
• Custom dismissible UI → use <sgds-close-button> directly