Alert

Contextual message boxes with semantic color variants for success, warning, and error states.

Preview

Info This is a default alert message.

Success Operation completed successfully.

Warning Please review before continuing.

Error Something went wrong.

Usage

<div class="glass-alert">
  <span class="alert-title">Info</span>
  <span class="alert-message">Default alert message.</span>
</div>

<div class="glass-alert success">...</div>
<div class="glass-alert warning">...</div>
<div class="glass-alert error">...</div>

Sub-elements

Class	Purpose
`.alert-title`	Bold label text (`font-weight: 700`)
`.alert-message`	Body text (`font-size: 0.9rem`, flex-grows to fill space)

Semantic Variants

Modifier	Background	Border	Text Color
(none)	Default glass	Default glass	`--glass-text-secondary`
`.success`	Green tint 12%	Green 30%	`--glass-success`
`.warning`	Orange tint 12%	Orange 30%	`--glass-warning`
`.error`	Red tint 12%	Red 30%	`--glass-error`

CSS Properties

Property	Value
Background	`var(--glass-bg)` with blur
Border	`1px solid var(--glass-border)`
Border Radius	`var(--glass-radius-md)` (14px)
Padding	`1rem 1.25rem`
Layout	`display: flex; align-items: center; gap: 0.75rem`
Width	`100%`

Compatible Modifiers

.vibrant — accent-tinted
.glow — outer glow ring
.thin / .thick — material weight