Alert
A modal dialog that interrupts the user with important content and expects a response.
Default
Here is a gentle confirmation that your action was successful.
With Description
Use the
children prop to provide additional context to the alert. This will be displayed below the alert message.Warning!
This is a warning message.
With Action
Use the
isMultiple prop to allow multiple items to be expanded at once.Warning!
Your plan will expire soon, please renew your plan.
Success
Your Pro plan has been activated.
Custom Icon
Use the
icon prop to override the Alert's icon.This is a info message.
Without Icon
Use the
icon={null} prop to override the Alert's icon.This is a warning message.
Status
Use the
status prop for different states:: success(the default), info, warning and danger with corresponding icon and color combinations for each.info
This is a description message for info
success
This is a description message for success
warning
This is a description message for warning
danger
This is a description message for danger
default
This is a description message for default
Variants
Use the
variant prop to change the visual style of the alert. Values can be outlined or solidinfo
This is a description message for info
success
This is a description message for success
warning
This is a description message for warning
danger
This is a description message for danger
default
This is a description message for default
info
This is a description message for info
success
This is a description message for success
warning
This is a description message for warning
danger
This is a description message for danger
default
This is a description message for default