Home
Alert
Alerts show short, prominent contextual messages with optional icon and description.
Usage
Alerts highlight short, contextual messages with a leading icon and a clear label.
<wc-alert description="These color roles were chosen to create design coherence and familiarity."></wc-alert>
Use slots to customize icon, label, and content.
<wc-alert>
<wc-icon slot="icon" name="campaign"></wc-icon>
<span slot="label">Announcement:</span>
Scheduled maintenance starts at 12:00 UTC.
</wc-alert>
Variants
Alert variants map semantic intent to Material color roles.
<wc-alert variant="note" description="General guidance for a non-blocking context."></wc-alert>
<wc-alert variant="info" description="A neutral informational message for users."></wc-alert>
<wc-alert variant="success" description="Your settings were saved successfully."></wc-alert>
<wc-alert variant="warning" description="Check this value before continuing."></wc-alert>
<wc-alert variant="error" description="We could not complete your request."></wc-alert>
On this page
Alert
Usage Variants