Alert
Free
Displays a callout for user attention with contextual feedback messages.
Installation
Install via CLI
npx @moontra/moonui-cli add alertUsage
Heads up!
You can add components to your app using the cli.
Examples
Dismissible Alert
closable renders a dismiss control and calls onClose — the only interactive behaviour Alert exposes, so the consumer owns whether the alert stays unmounted
New version available
MoonUI 5.1.0 ships the /hooks entry point. Dismiss this once you have upgraded.
Default Alert
Basic alert with title and description.
Heads up!
You can add components to your app using the cli.
Error Alert
Alert with error styling for critical messages.
Error
Your session has expired. Please log in again.
Success Alert
Alert with success styling for positive feedback.
Success!
Your changes have been saved successfully.
Warning Alert
Alert with warning styling for cautionary messages.
Warning
Your subscription is about to expire in 3 days.
Info Alert
Alert with info styling for informational messages.
Info
A new software update is available. Download version 2.0.1 for the latest features.
Without Icon
Alert without an icon for simpler presentation.
Pro tip
You can use keyboard shortcuts to navigate through the application faster.
Without Title
Alert with only description for brief messages.
Click on any item to view more details about your selection.
Sizes
Control vertical padding and text size with the size prop.
Small
Compact alert with reduced padding.
Medium
The standard alert size (default).
Large
Roomier alert with larger text.
Radius
Adjust corner rounding with the radius prop.
Square
No corner rounding.
Large radius
Larger rounded corners.