Usage
import { Alert } from "lambda-ui-components";
export default function App() {
return (
<Alert
color="success"
variant="soft"
title="Success!"
message="Your changes have been saved successfully."
/>
);
}Alert
Alert component displays important messages to users in a prominent way.
Playground
Experiment with all the properties of the Alert component in real time.
Properties
message
The content of the alert message.
title
The title of the alert.
color
Controls the color scheme of the alert.
variant
Defines the visual style of the alert.
size
Controls the size of the alert.
radius
Defines the border radius of the alert.
showIcon
If true, displays an icon based on the color.
Alert Title
This is an alert message
Custom Icon
You can use a custom SVG icon with the customIcon prop.
Note: Custom icons only work with the neutral color variant, as other colors use predefined semantic icons.
New Feature!
Check out our latest update.
With Close Button
When you provide an onClose callback, a close button will automatically appear on the alert. This allows users to dismiss the alert.
Warning
This action cannot be undone.
API Reference
Props
Prop | Default | Type |
|---|---|---|
color | "neutral" | "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" |
message | undefined | string |
title | undefined | string |
variant | "soft" | "outline" | "soft" | "solid" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "small" | "none" | "tiny" | "small" | "medium" | "large" |
showIcon | true | boolean |
customIcon | undefined | ReactNode |
onClose | undefined | () => void |
role | "status" | "alert" | "status" |