Alert

Paper-styled notification cards with a 3-level elevation system.

Default

The default alert uses medium shadow (Level 3), suitable for general notifications.

Heads up!

You can add components to your app using the CLI.

Elevation

Three elevation levels for different contexts. Alerts are always standalone - use outlined for subtle notifications in dense layouts.

Elevated

Strong shadow for standalone announcements or hero moments.

Default

Medium shadow for general notifications. The standard choice.

Outlined

Border only, no shadow. Lightweight for dense layouts.

Interactive Alerts

Alerts can be shown and dismissed dynamically with smooth animations.

Standard Variants

Color variants for different message types: info, success, warning, and error.

Default Alert

This is a default alert with neutral styling and paper-like appearance.

Information

This is an informational alert. It provides helpful context or tips.

Success

Your changes have been saved successfully. Everything is working as expected.

Warning

Please review your input before continuing. Some fields may need attention.

Error

Something went wrong. Please try again or contact support if the issue persists.

Soft Variants

Gentler color treatment for less visual noise, using muted backgrounds.

Information

A softer informational alert that blends better with content-heavy pages.

Success

Operation completed successfully with a gentler visual treatment.

Warning

A subtle warning that draws attention without being too harsh.

Error

An error message with muted styling for less visual disruption.

Notification Stack

Multiple alerts stacked vertically with dismiss functionality.

Deployment Successful

Your app has been deployed to production.

Storage Warning

You are using 85% of your storage quota.

System Update

A new version is available. Restart to update.

Without Icon

Note

Alerts can be displayed without an icon for a cleaner look when the context is clear.

Long Content

Browser Compatibility Notice

Some features of this application may not work correctly in older browsers. For the best experience, we recommend using the latest version of Chrome, Firefox, Safari, or Edge.

If you encounter any issues, please clear your browser cache and try again. You can also try disabling browser extensions that might interfere with the application functionality.

API Reference

Alert component with 3-level elevation system and multiple color variants.

Alert

PropTypeDescription

elevation"elevated" | "default" | "outlined"Shadow level

Elevation Levels

ElevationShadowUse Case

elevatedStrongHero announcements, standalone

defaultMediumGeneral notifications

outlinedNone (border)Dense layouts, sidebars