Alert Component
The Alert in web design is a highlighted box that grabs attention, often used for brief messages or important information.
Installation
Ensure that have the @zyxui library installed in your project:
If you haven't install and setup @zyxui before please follow the installation guide
Basic Alert
To create a basic alert, you can simple use it like example in below:
Alert Title
You can pass ReactNode as description.
Alert Title (Column Direction)
You can pass ReactNode as description.
Customization
We allow you to customize your Alert component as you want. Here are some of props that allow you to make customization on the Alert component.
Colors
Our Alert component offers many colors, such as default, error, warning, and success.
Default Color (No Icon)
This is a default color alert description! This example also shows that you can use alert without icon props.
Error Color (With Icon)
This is an error color alert description!
Warning Color
This is a warning color alert description!
Success Color
This is a success color alert description!
Variants
You can also modify Alert styles using variant prop, with those options: solid, bordered, flat, shadow, and gradient.
Solid Variant
This is a an alert with solid variant.
Bordered Variant
This is a an alert with bordered variant.
Flat Variant
This is a an alert with flat variant.
Shadow Variant
This is a an alert with shadow variant.
Gradient Variant
This is a an alert with gradient variant.
Radiuses
You can customize the border-radius of your Alert component with radius prop with these options: sm, md, lg, circle, and none.
sm radius
Small radius alert.
md radius
Medium radius alert.
lg radius
Large radius alert.
circle radius
Circle radius alert.
none radius
None radius alert.
Good To Know
You should use one of the `title` and `description` props at least. Otherwise `Alert` component will not work as expected.
API Reference
For an in-depth exploration of available props and advanced usage, consult the Alert component's API reference:
| Property | Description | Type | Default |
|---|---|---|---|
| icon | To add icon for alert. | ReactNode | null |
| title | Alert title. | ReactNode | null |
| description | Alert description. | ReactNode | null |
| className | Adding custom class names to your alert. | string | undefined |
| color | Customize alert color styles. | default | error | warning | success | default |
| variant | Change alert base styles. | solid | bordered | flat | shadow | gradient | solid |
| radius | Change alert border radius style. | sm | md | lg | circle | none | md |
| direction | Change alert flex-direction. | row | column | row |