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.

Announcement: Scheduled maintenance starts at 12:00 UTC.


  <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>