#
Simple Alert
The <Alert /> is use to create a simple alert with a message prop and type
React / Next.js
Loading
This is a success
This is the alert message
This is the alert message
This is the alert message
#
Outline Alert
The outlined prop is use to create a simple alert with an outline
React / Next.js
Success - This is a message
Info - This is a message
Warning - This is a message
Error - This is a message
#
Raised Alert
Raised alerts have a box-shadow attached to them
React / Next.js
This is a success
This is the alert message
This is the alert message
This is the alert message
#
Standard
The standard prop is used to add the status color as a border top to the alert
React / Next.js
This is a success
This is a flat success
This is the alert message
This is the alert message
This is the alert message
This is the alert message
This is the alert message
This is the alert message
#
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.
PropDescriptionValue(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`