Alerts are essential for communicating important messages, warnings, or updates to users. In this section, you'll learn how to use basic alerts effectively to provide information and enhance the user experience.
Basic alerts are a fundamental element of user interface design, serving as a means to communicate important messages clearly and effectively. Whether you're building a website or an application, incorporating basic alerts can greatly improve the user experience by providing timely information and feedback.
Icon alerts combine informative messages with easily recognizable icons to convey important information to users effectively. This section will guide you on how to use icon alerts in your project.
Icon alerts are a valuable tool for enhancing user interaction by providing clear and visually appealing messages. By following the steps above, you can easily integrate icon alerts into your project and effectively communicate important information to your users.
Additional content alerts allow you to convey more information to users by including extra elements within the alert, such as icons, labels, or additional text. This section provides guidance on how to use additional content alerts effectively.
Additional content alerts are a valuable tool for delivering richer information to users while maintaining a clean and organized design. By following the steps above, you can easily integrate additional content alerts into your project and enhance your communication with users.
Icon & Dismiss Alerts combine icons with dismiss functionality, allowing you to display important messages to users and give them the option to close the alert when they've read it. This section provides guidance on how to use these alerts effectively.
Icon & Dismiss Alerts are a user-friendly way to provide information and allow users to manage their notifications. By following the steps above, you can seamlessly integrate these alerts into your project and improve user interaction and communication.
Outline Alerts provide a clean and minimalistic way to display important messages with outlined borders. This section provides guidance on how to use these alerts effectively to convey information to your users.
Outline Alerts offer a sleek and effective way to communicate essential information to users while maintaining a clean design. By following the steps above, you can seamlessly integrate these alerts into your project and enhance the user experience.
Soft Color Alerts provide a visually pleasing and gentle way to convey important messages with soft color tones. This section provides guidance on how to use these alerts effectively to enhance the user experience.
Soft Color Alerts offer a subtle and pleasing way to communicate essential information to users while maintaining a gentle aesthetic. By following the steps above, you can seamlessly integrate these alerts into your project and create a visually appealing user experience.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `dismissible` | `boolean` | Indicates if the alert can be dismissed |
| `variant` | `Variant` | Variant of the alert style |
| `onShow` | `() => {}` | Callback when the alert is shown |
| `onShown` | `() => {}` | Callback after the alert is shown |
| `onHide` | `() => {}` | Callback when the alert is about to hide |
| `onHidden` | `() => {}` | Callback after the alert is hidden |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | HTML element type for the dismiss button (default is "button" or "a") |
