Documentation
FeedbackGlass surface
Alert
Surfaces contextual status messages.
01
See it in context
Preview
02
Copy a working example
Usage
---
import { Alert } from '@santi020k/lumen-astro'
---
<Alert>
<strong>Project synced.</strong>
<p>Your design tokens are up to date.</p>
</Alert>
<Alert variant="success">
<strong>Deployed.</strong>
<p>lumen-docs is live in production.</p>
</Alert>
<Alert variant="warning">
<strong>Certificate expiring.</strong>
<p>Renew the custom domain certificate within 7 days.</p>
</Alert>
<Alert variant="destructive">
<strong>Build failed.</strong>
<p>Type error in Button.astro — deploy blocked.</p>
</Alert>---
import { Alert } from '@santi020k/lumen-astro'
---
<Alert>
<strong>Project synced.</strong>
<p>Your design tokens are up to date.</p>
</Alert>
<Alert variant="success">
<strong>Deployed.</strong>
<p>lumen-docs is live in production.</p>
</Alert>
<Alert variant="warning">
<strong>Certificate expiring.</strong>
<p>Renew the custom domain certificate within 7 days.</p>
</Alert>
<Alert variant="destructive">
<strong>Build failed.</strong>
<p>Type error in Button.astro — deploy blocked.</p>
</Alert>import { Alert } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Alert>
<strong>Project synced.</strong>
<p>Your design tokens are up to date.</p>
</Alert>
<Alert variant="success">
<strong>Deployed.</strong>
<p>lumen-docs is live in production.</p>
</Alert>
<Alert variant="warning">
<strong>Certificate expiring.</strong>
<p>Renew the custom domain certificate within 7 days.</p>
</Alert>
<Alert variant="destructive">
<strong>Build failed.</strong>
<p>Type error in Button.astro — deploy blocked.</p>
</Alert>
</>
)import { Alert } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Alert>
<strong>Project synced.</strong>
<p>Your design tokens are up to date.</p>
</Alert>
<Alert variant="success">
<strong>Deployed.</strong>
<p>lumen-docs is live in production.</p>
</Alert>
<Alert variant="warning">
<strong>Certificate expiring.</strong>
<p>Renew the custom domain certificate within 7 days.</p>
</Alert>
<Alert variant="destructive">
<strong>Build failed.</strong>
<p>Type error in Button.astro — deploy blocked.</p>
</Alert>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-alert>
<strong>Project synced.</strong>
<p>Your design tokens are up to date.</p>
</lumen-alert>
<lumen-alert variant="success">
<strong>Deployed.</strong>
<p>lumen-docs is live in production.</p>
</lumen-alert>
<lumen-alert variant="warning">
<strong>Certificate expiring.</strong>
<p>Renew the custom domain certificate within 7 days.</p>
</lumen-alert>
<lumen-alert variant="destructive">
<strong>Build failed.</strong>
<p>Type error in Button.astro — deploy blocked.</p>
</lumen-alert><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-alert>
<strong>Project synced.</strong>
<p>Your design tokens are up to date.</p>
</lumen-alert>
<lumen-alert variant="success">
<strong>Deployed.</strong>
<p>lumen-docs is live in production.</p>
</lumen-alert>
<lumen-alert variant="warning">
<strong>Certificate expiring.</strong>
<p>Renew the custom domain certificate within 7 days.</p>
</lumen-alert>
<lumen-alert variant="destructive">
<strong>Build failed.</strong>
<p>Type error in Button.astro — deploy blocked.</p>
</lumen-alert>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add Alertlumen add Alertpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Alert --target reactlumen add Alert --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Alert --target elementslumen add Alert --target elementsGlass
Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.
---
import { Alert } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo docs-glass-demo--stack">
<Alert glass>
<strong>Glass tokens synced.</strong>
<p>Blur, saturation, specular edge, and shadow values come from the shared theme contract.</p>
</Alert>
<Alert variant="success" glass>
<strong>Deployed to production.</strong>
<p>Status variants keep their tint on top of the frosted surface.</p>
</Alert>
</div>---
import { Alert } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo docs-glass-demo--stack">
<Alert glass>
<strong>Glass tokens synced.</strong>
<p>Blur, saturation, specular edge, and shadow values come from the shared theme contract.</p>
</Alert>
<Alert variant="success" glass>
<strong>Deployed to production.</strong>
<p>Status variants keep their tint on top of the frosted surface.</p>
</Alert>
</div>import { Alert } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo docs-glass-demo--stack">
<Alert glass>
<strong>Glass tokens synced.</strong>
<p>Blur, saturation, specular edge, and shadow values come from the shared theme contract.</p>
</Alert>
<Alert variant="success" glass>
<strong>Deployed to production.</strong>
<p>Status variants keep their tint on top of the frosted surface.</p>
</Alert>
</div>
</>
)import { Alert } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo docs-glass-demo--stack">
<Alert glass>
<strong>Glass tokens synced.</strong>
<p>Blur, saturation, specular edge, and shadow values come from the shared theme contract.</p>
</Alert>
<Alert variant="success" glass>
<strong>Deployed to production.</strong>
<p>Status variants keep their tint on top of the frosted surface.</p>
</Alert>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo docs-glass-demo--stack">
<lumen-alert glass>
<strong>Glass tokens synced.</strong>
<p>Blur, saturation, specular edge, and shadow values come from the shared theme contract.</p>
</lumen-alert>
<lumen-alert variant="success" glass>
<strong>Deployed to production.</strong>
<p>Status variants keep their tint on top of the frosted surface.</p>
</lumen-alert>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo docs-glass-demo--stack">
<lumen-alert glass>
<strong>Glass tokens synced.</strong>
<p>Blur, saturation, specular edge, and shadow values come from the shared theme contract.</p>
</lumen-alert>
<lumen-alert variant="success" glass>
<strong>Deployed to production.</strong>
<p>Status variants keep their tint on top of the frosted surface.</p>
</lumen-alert>
</div>API reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| glass | boolean | "subtle" | "strong" | false | Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity. |
| variant | "default" | "destructive" | "success" | "warning" | "default" | Controls the alert tone. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |