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