Home
Notification
Notifications communicate contextual status, errors, warnings, and success messages.
Usage
Use notifications to surface concise status updates and next steps without interrupting the flow.
<wc-notification dismissible="true" action="View details">
<span slot="title">Backup completed</span>
<span slot="subtitle">All files were saved to cloud storage.</span>
</wc-notification>
States
Set the state to communicate intent clearly: informational, success, warning, or error.
<div style="display: grid; gap: var(--spacing-100); width: min(100%, 36rem);">
<wc-notification variant="info">
<span slot="title">New sign-in from Chrome</span>
</wc-notification>
<wc-notification variant="success">
<span slot="title">Profile updated</span>
</wc-notification>
<wc-notification variant="warning">
<span slot="title">Storage is almost full</span>
</wc-notification>
<wc-notification variant="error">
<span slot="title">Payment failed</span>
<span slot="subtitle">Try a different card or retry later.</span>
</wc-notification>
</div>
Inline and actions
Inline mode keeps title, subtitle, and actions in a tighter row for compact surfaces.
Waiting for interaction...
<div style="display: grid; gap: var(--spacing-100); width: min(100%, 40rem);">
<wc-notification inline="true" dismissible="true" action="Undo" variant="success" id="inline-notification-demo">
<span slot="title">Changes saved.</span>
<span slot="subtitle">Your preferences are now live.</span>
</wc-notification>
<p id="notification-log" class="text-body">Waiting for interaction...</p>
</div>
<script>
const notification = document.querySelector('#inline-notification-demo');
const log = document.querySelector('#notification-log');
notification.addEventListener('notification-action-click', () => {
log.textContent = 'Action clicked: Undo';
});
notification.addEventListener('notification-dismiss', event => {
log.textContent = `Notification dismissed (${event.detail.reason})`;
});
</script>
High contrast
Enable high contrast mode for stronger separation between text and container colors.
<div style="display: grid; gap: var(--spacing-100); width: min(100%, 36rem);">
<wc-notification high-contrast="true" dismissible="true">
<span slot="title">System message</span>
<span slot="subtitle">A restart is required to apply updates.</span>
</wc-notification>
<wc-notification high-contrast="true" variant="success">
<span slot="title">Deployment completed</span>
</wc-notification>
<wc-notification high-contrast="true" variant="warning">
<span slot="title">Quota reaches 90%</span>
</wc-notification>
<wc-notification high-contrast="true" variant="error">
<span slot="title">Unable to sync files</span>
</wc-notification>
</div>
On this page
Notification
Usage States Inline and actions High contrast