Alert
Displays a callout for user attention with contextual feedback.
Installation
import { Alert, AlertTitle, AlertDescription } from "@sourceful-energy/ui"Usage
Heads up!
You can add components to your app using the CLI.
Examples
With Icon
Note
This is an informational message with an icon.
Destructive
Error
Your session has expired. Please log in again.
Success
Success
Your device has been connected successfully.
Warning
Warning
Your battery is running low. Connect to charger soon.
Info
Did you know?
Solar production peaks between 10am and 2pm.
Energy
Energy Update
Grid prices are low right now. Good time to charge!
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "success" | "warning" | "info" | "energy" | "default" | The visual style of the alert. |
| className | string | - | Additional CSS classes. |
Accessibility
- Uses
role="alert"for screen readers - Icons should have appropriate aria-labels
- Color is not the only indicator of variant type
- Text content provides context for all users