SGDS Modal Component Skill

<sgds-modal> renders a dialog overlay that traps focus until dismissed. Use it for confirmations, alerts, or focused tasks that require user attention before continuing.

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

Size?

• Default → size="md" (default)
• Small → size="sm" / Large → size="lg" / Extra large → size="xl" / Full screen → size="fullscreen"

Prevent closing on overlay/Esc? → Listen for sgds-close and call event.preventDefault()

Disable open/close animation? → Add noAnimation