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.
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.