Notification component displays temporary messages to users, commonly used for alerts, confirmations, and status updates.
First, wrap your application with the NotificationProvider at the root level.
import { NotificationProvider } from "lambda-ui-components";
export default function App() {
return (
<NotificationProvider
maxNotifications={4}
placement="top-right"
duration={5000}
>
{/* Your app content */}
</NotificationProvider>
);
}Use the useNotification hook to show notifications from any component within the provider.
import { useNotification, Button } from "lambda-ui-components";
export default function MyComponent() {
const { showNotification } = useNotification();
const handleClick = () => {
showNotification({
title: "Success!",
message: "Your changes have been saved successfully.",
notificationType: "success",
closable: true,
});
};
return <Button onClick={handleClick} label="Show Notification" />;
}Notifications come in different types: neutral, info, success, warning, and danger.
Notifications support different visual variants: themed (default), solid, soft, darkened, and lightened.
Add action buttons to your notification using the onConfirm and onCancel callbacks.
Control where notifications appear using the placement prop. You can set a default placement in the provider or override it per notification.
Set how long notifications stay visible using the duration prop (in milliseconds). Set to 0 to disable auto-close.
Prop | Default | Type |
|---|---|---|
title | undefined | string |
message | undefined | string |
notificationType | "neutral" | "neutral" | "info" | "success" | "warning" | "danger" |
variant | "themed" | "themed" | "solid" | "soft" | "darkened" | "lightened" |
placement | "top-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" |
closable | true | boolean |
duration | 5000 | number |
icon | undefined | ReactNode |
onClose | undefined | () => void |
onConfirm | undefined | () => void |
onCancel | undefined | () => void |
confirmText | "Confirm" | string |
cancelText | "Cancel" | string |