Alert
Alerts are used to feedback to the user action or system activity.
Basic
Basic usage of alert.
Additional description and information about copywriting.
Icon
Display icon within alert.
Additional description and information about copywriting.
CustomIcon
Icon can be replaced by setting own icon to
customIcon prop.Additional description and information about copywriting.
Type
Change the status of the alerts by passing the
type prop. Alert supports info, success, warning, and danger types.Additional description and information about copywriting.
Additional description and information about copywriting.
Additional description and information about copywriting.
Additional description and information about copywriting.
Title
Alert also can have a title by input a string to
title prop.Error!
Additional description and information about copywriting.Closable
Turn
closable prop to true to display close button which allow user dismiss alert.Thanks for submitting your application. Our team will get back to you soon.
API
Alert
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Alert title | ReactNode | string | - |
| showIcon | Display icon based on type | boolean | false |
| customIcon | Replace default icon to custom icon | ReactNode | - |
| type | The status of the alert | 'info' | 'warning' | 'success' | 'danger' | 'warning' |
| closable | Display close button | boolean | false |
| customClose | Replace default close | ReactNode | | - |
| rounded-sm | Whether the Alert have round border radius | boolean | true |
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
| triggerByToast | identifier for toast trigger (for toast purpose) | boolean | false |
| duration | Interval of dismiss (for toast purpose) | 2000 | number |