#
Simple Alert
The <Alert /> is use to create a simple alert with a message prop and type
React / Next.js
#
Outline Alert
The outlined prop is use to create a simple alert with an outline
React / Next.js
#
Raised Alert
Raised alerts have a box-shadow attached to them
React / Next.js
#
Standard
The standard prop is used to add the status color as a border top to the alert
React / Next.js
#
Modal Alert
This alert is use when submitting a form or handling states
React / Next.js
Alert
Alerts are used to display important messages base on status.
| Prop | Description | Value(s) |
|---|---|---|
| `message` | Main message text displayed in the alert | `<string>` |
| `type` | Type of alert, affecting the icon and color | `'success' | 'info' | 'warning' | 'error'` |
| `outlined` | If true, alert appears in outlined style | `true | false` |
| `fixed` | Position of the alert on the screen | `top-left | top-right | bottom-left | bottom-right | top-middle | bottom-middle | middle` |
| `fullWidth` | Expands the alert to full width | `true | false` |
| `isLoading` | Displays a loading spinner instead of icon | `true | false` |
| `animation` | CSS animation type | `SlideTop | SlideBottom | SlideLeft | SlideRight | ScaleUp | Opacity` |
| `duration` | Animation duration | `<string> in seconds (e.g., '0.3')` |
| `variant` | Custom class or style to override default types | `<string>` |
| `flat` | Removes background and shadows | `true | false` |
| `standard` | Applies standard styling based on type | `true | false` |
| `card` | Wraps the alert in a card style | `true | false` |
| `style` | Inline CSS styling for the alert box | `<React.CSSProperties>` |
| `autoHide` | Automatically hides the alert after delay | `true | false` |
| `autoHideDuration` | Delay (ms) before alert hides (if autoHide is true) | `<number> (e.g., 3000)` |
| `onClose` | Callback function when alert hides automatically | `() => void` |