Feedback alertglass

Glass Alert

Translucent feedback bar.

Information
This is a helpful informational alert for the user.
Success
Your changes have been saved successfully.
Warning
Please review your settings before continuing.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { GlassAlert } from 'astro-component-kit';
---

<div class="stack-v gap-4">
  <GlassAlert type="info" title="System Update">
    A new version of the dashboard is available. Please refresh to see changes.
  </GlassAlert>

  <GlassAlert type="success" title="Payment Successful">
    Your subscription has been renewed for another month.
  </GlassAlert>
  
  <GlassAlert type="error" title="Connection Lost">
    We couldn't reach the server. Checking your internet connection...
  </GlassAlert>
</div>
--- import { GlassAlert } from 'astro-component-kit'; --- <div class="stack-v gap-4"> <GlassAlert type="info" title="System Update"> A new version of the dashboard is available. Please refresh to see changes. </GlassAlert> <GlassAlert type="success" title="Payment Successful"> Your subscription has been renewed for another month. </GlassAlert> <GlassAlert type="error" title="Connection Lost"> We couldn't reach the server. Checking your internet connection... </GlassAlert> </div>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassAlert.astro and paste the following code:

astro 
---
/**
 * GlassAlert — A translucent feedback bar for displaying situational messages.
 * 
 * @param {'info'|'success'|'warning'|'error'} type - The severity or nature of the alert. Default is 'info'.
 * @param {string} title - Bold header text for the alert.
 */
interface Props { 
  type?: 'info' | 'success' | 'warning' | 'error'; 
  title: string; 
}

const { type = 'info', title } = Astro.props;

const icons = {
  info: "i",
  success: "✓",
  warning: "!",
  error: "✕"
};
---

<div class:list={['glass-alert', `glass-alert--${type}` ]} role="alert">
  <div class="glass-alert__icon" aria-hidden="true">{icons[type]}</div>
  <div class="glass-alert__content">
    <div class="glass-alert__title">{title}</div>
    <div class="glass-alert__body"><slot /></div>
  </div>
</div>

<style>
  .glass-alert { 
    display: flex; 
    gap: var(--sp-4, 1rem); 
    padding: var(--sp-5, 1.25rem); 
    border-radius: var(--r-md, 16px); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    backdrop-filter: blur(12px); 
    background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
    width: 100%;
    box-sizing: border-box;
  }
  
  .glass-alert--success { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.05); }
  .glass-alert--warning { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.05); }
  .glass-alert--error { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }
  
  .glass-alert__icon { 
    font-weight: 900; 
    background: rgba(255, 255, 255, 0.1); 
    width: 24px; height: 24px; 
    display: grid; place-items: center; 
    border-radius: var(--r-full, 50%); 
    font-size: 0.8rem; 
    flex-shrink: 0;
    font-family: monospace;
    color: var(--c-text-1, #fff);
  }
  
  .glass-alert--success .glass-alert__icon { background: #10b981; color: #fff; }
  .glass-alert--warning .glass-alert__icon { background: #f59e0b; color: #fff; }
  .glass-alert--error .glass-alert__icon { background: #ef4444; color: #fff; }
  
  .glass-alert__title { font-weight: 700; color: var(--c-text-1, #fff); margin-bottom: 2px; font-size: 0.95rem; }
  .glass-alert__body { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); line-height: 1.5; }
</style>
--- /** * GlassAlert — A translucent feedback bar for displaying situational messages. * * @param {'info'|'success'|'warning'|'error'} type - The severity or nature of the alert. Default is 'info'. * @param {string} title - Bold header text for the alert. */ interface Props { type?: 'info' | 'success' | 'warning' | 'error'; title: string; } const { type = 'info', title } = Astro.props; const icons = { info: "i", success: "✓", warning: "!", error: "✕" }; --- <div class:list={['glass-alert', `glass-alert--${type}` ]} role="alert"> <div class="glass-alert__icon" aria-hidden="true">{icons[type]}</div> <div class="glass-alert__content"> <div class="glass-alert__title">{title}</div> <div class="glass-alert__body"><slot /></div> </div> </div> <style> .glass-alert { display: flex; gap: var(--sp-4, 1rem); padding: var(--sp-5, 1.25rem); border-radius: var(--r-md, 16px); border: 1px solid var(--c-border, rgba(255,255,255,0.1)); backdrop-filter: blur(12px); background: var(--c-bg-elev, rgba(255,255,255,0.03)); width: 100%; box-sizing: border-box; } .glass-alert--success { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.05); } .glass-alert--warning { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.05); } .glass-alert--error { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); } .glass-alert__icon { font-weight: 900; background: rgba(255, 255, 255, 0.1); width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-full, 50%); font-size: 0.8rem; flex-shrink: 0; font-family: monospace; color: var(--c-text-1, #fff); } .glass-alert--success .glass-alert__icon { background: #10b981; color: #fff; } .glass-alert--warning .glass-alert__icon { background: #f59e0b; color: #fff; } .glass-alert--error .glass-alert__icon { background: #ef4444; color: #fff; } .glass-alert__title { font-weight: 700; color: var(--c-text-1, #fff); margin-bottom: 2px; font-size: 0.95rem; } .glass-alert__body { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); line-height: 1.5; } </style>

Quick Info

Category
Feedback
Filename
GlassAlert.astro
Dependencies
None — pure Astro + CSS
Tags
alertglass