Alert
Alert is a native web component (`<pura-alert>`) that shows a callout with an icon, an optional title, and a description to communicate contextual messages to the user. Use it for inline feedback on the page, such as confirmations, warnings, or errors, with four semantic variants. It can be dismissible, removing itself from the page when closed.
Preview
<pura-alert variant="info" title="Update available">
A new version of the system is ready to install.
</pura-alert>
<pura-alert variant="success" title="Payment confirmed" dismissible>
We received your payment and your order is already being processed.
</pura-alert>
<pura-alert variant="warning" title="Storage almost full">
You've used 90% of your storage. Consider freeing up space.
</pura-alert>
<pura-alert variant="danger" title="Failed to save" dismissible>
We couldn't save your changes. Please try again.
</pura-alert>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "danger" | info | Semantic variant that sets the callout's color and icon. |
title | string | — | Optional title shown in bold above the description. |
dismissible | boolean | false | When present, shows a close button that removes the alert. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/alert.js"></script>import "./pura/lib/alert.js";