Components
Alert
Status-based alerts with icon, title, body, and optional dismiss. 4 statuses with glass and glow support.
Playground
Explore all alert props interactively.
This is an alert message. You can customize it with the props below.
<Alert>...</Alert>Props
Alert status
Alert title
Show dismiss button
Show status icon
Glass surface density
Backdrop blur intensity
Elevated with shadow
Colored glass accent orbs behind content
Glow intensity
All Statuses
All four status types with default styling.
This is an informational message.
Operation completed successfully.
Proceed with caution.
Something went wrong.
With Title
Alerts with a bold title above the body text.
Information
Something you should know about.
Success
Your changes have been saved.
Warning
This action cannot be undone.
Error
Failed to connect to the server.
Dismissible
Alerts with a dismiss button that removes them from the page.
Dismissible Info
Click the X to dismiss this alert.
Dismissible Success
This alert can be closed.
Glass
Frosted glass alerts with backdrop blur. Shown on a dark background.
Information
Frosted glass info alert.
Success
Glass success alert.
Warning
Glass warning alert.
Error
Glass error alert.
Glow
Gradient glow effect behind the alert. Combine with glass for the full effect.
Info Glow
Glow effect on info alert.
Glass + Glow
Glass and glow combined.
Error Glass + Glow
Glass glow on error alert.