Alert
A modal dialog that interrupts the user with important content and expects a response.
Usage
Here is a gentle confirmation that your action was successful.
Status
Use the
status prop for different states :: success, info, default,warning and danger with corresponding icon and color combinations for each.This is a warning message.
This is a info message.
This is a success message.
This is a danger message.
This is a default message.
Variants
Use the
variant prop to change the visual style of the alert. Values can be outlined or solidThis is a solid warning Alert.
This is a solid info Alert.
This is a solid success Alert.
This is a solid danger Alert.
This is a solid default Alert.
This is an outlined warning Alert.
This is an outlined info Alert.
This is an outlined success Alert.
This is an outlined danger Alert.
This is an outlined default Alert.
Radius
none: This is an none Radius Alert
sm: This is an sm Radius Alert
md: This is an md Radius Alert
lg: This is an lg Radius Alert
xl: This is an xl Radius Alert
2xl: This is an 2xl Radius Alert
3xl: This is an 3xl Radius Alert
full: This is an full Radius Alert
With Heading
Use the
heading prop to add a heading to an Alert.Warning!
Your plan will expire soon, please renew your plan.
Info!
Your Pro account has been verified.
Success!
Your Pro plan has been activated.
Custom Icon
Use the
icon prop to override the Alert's default icon.This is a warning message.
This is an info message.
Your Pro plan has been activated.
Without Icon
Use the
icon={null} prop to remove the Alert's icon.This is a warning message.
This is an info message.
This is an success message.
With Action
Use the
action prop to allow actions in an Alert.Your plan will expire soon, please renew your plan.
Your Pro plan has expired.
Your Pro plan has been activated.