Alert
Alert to communicate a state that affects a system, feature or page.
Percept UI Is Awesome
You can add components to your app using the cli
Installation
CLI
Add component to your project.
npx @perceptui/cli@latest add alertImport from @perceptui/ui
Note: If you have installed @perceptui/ui package, then import Alert from
@perceptui/ui.
import { Alert } from "@perceptui/ui";Percept UI Is Awesome
You can add components to your app using the cli
API References
| Prop | Type | Description | Default |
|---|---|---|---|
| variant | "solid" | "outline" | "surface | Form of the Alert | solid |
| type | "success" | "warning" | "error" | "info" | Type of the Alert | success |
| message | string | Message of the Alert | _ |
| icon | ReactNode | Icon of the Alert | type |
| className | string | className | _ |
Examples
Variant
Use the variant prop to control the visual style of the button.
Solid Variant
This is a solid variant Alert.
Outline Variant
This is a outline variant Alert.
Surface Variant
This is a outline variant Alert.
Type
Use the type prop to control the type of the alert.
Success Type
This is a solid success Alert.
This is a outline success Alert.
This is a surface success Alert.
Info Type
This is a solid info Alert.
This is a outline info Alert.
This is a surface info Alert.
Error Type
This is a solid error Alert.
This is a outline error Alert.
This is a surface error Alert.
Warning Type
This is a solid warning Alert.
This is a outline warning Alert.
This is a surface warning Alert.