SGDS Toast Component Skill

<sgds-toast> is a brief, non-blocking notification. <sgds-toast-container> positions one or more toasts on the screen. Toasts must contain both a title and a message, and optionally an icon and an action link.

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

Variant?

• Informational → variant="info" (default)
• Confirmation → variant="success"
• Error → variant="danger"
• Caution → variant="warning"
• Theme-neutral → variant="neutral"