Skip to content

pantoken / renderers/web-components/src / alert

Variable: alert

const alert: ElementDefinition

Alpha

<instui-alert> — an inline status message with role="alert". The variant attribute maps to the -color-<variant> modifier (info, success, warning, danger). Alerts are elevated by default; set has-shadow="false" to flatten one (→ -without-shadow, mirroring InstUI's hasShadow={false}). The timeout attribute (milliseconds) auto-dismisses the alert after that delay — it fades out, removes itself from the DOM, and fires a cancelable bubbling dismiss event (call preventDefault() on it to keep the alert mounted). Slotted content is the message body.

Example

html
<instui-alert variant="success" margin="0 0 small">Your changes were saved.</instui-alert>
<instui-alert variant="info" has-shadow="false">A flat, inline notice.</instui-alert>
<!-- auto-dismisses after 5s, firing a cancelable `dismiss` event: -->
<!-- <instui-alert variant="warning" timeout="5000">Saving…</instui-alert> -->
Your changes were saved.A flat, inline notice.