Alert
Alerts are used to display important messages base on status.
PropDescriptionValue(s)
`message`This contains your message`String`
`type`This selects the status of your alert`success, info, danger, warning`
`fixed`Used to create a fixed alert with the position as value`top-right, top-left, bottom-left, bottom-right , top-middle, bottom-middle , middle`
`fullWidth`Set width to be cover it's parent element (100%)`Boolean`
`isLoading`Create a spining loading alert`Boolean`
`standard`Create an alert with the status color as border top`Boolean`
`flat`remove border radius`Boolean`
`card`Add a card shadow to the alert`Boolean`
`animation`Is used to create an animation effect on the SnackBar`SlideBottom | ScaleUp | SlideTop | Opacity | SlideRight | SlideLeft`
`duration`Set the duration for your animation effect`time(sec)`
#
Simple Alert
The <Alert /> is use to create a simple alert with a message prop and type
React / Next.js Show Source Code
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 Show Source Code
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 Show Source Code
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 Show Source Code
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