Alert
Import
import { VKAlert } from "@vivakits/react-components";Severity
Alerts are available in four severity levels: info, success, warning, and error. The severity level can be set using the severity prop.
This is an info alert — check it out!
This is a success alert — check it out!
This is a warning alert — check it out!
This is an error alert — check it out!
Variants
Alerts are available in two variants: filled and outlined. The variant can be set using the variant prop.
This is a filled alert!
This is an outlined alert!
Actions
You can add an action to the Alert using the action prop. If you provide an onClose callback to the Alert without setting the action prop, the component will display a close icon (✕) by default.
This Alert displays the default close icon.
This is an alert with a button!
Icon
You can remove the icon from the Alert using the icon prop or add a custom icon.
This is the default alert!
This alert has no icon!
This is an alert with a custom icon!
Title
You can add a title to the Alert using the title prop.
Title
This is an alert with a title!
Custom Class
You can customize the Alert using the className prop.
This is a customised alert!
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| severity | successwarninginfoerror | Defines the style and icon used to indicate the alert's level of importance. | - |
| variants | filledoutlined | Specifies the visual appearance of the alert. | filled |
| action | function | Optional action to display on the alert, such as a dismiss or undo button. | - |
| icon | boolean | ReactNode | Allows customization of the icon displayed in the alert. Set to false to hide the icon. | true |
| title | string | The text to display as the alert message's title. | - |
| className | string | Custom class for the input mask field | - |