Inline Notification
Inline notification message
SaaSFeedback
Overview
InlineNotification displays contextual messages inline within page content. It supports five semantic variants, optional title, and a dismissible state for messages that can be closed by the user.
Usage
import { InlineNotification } from "@leanicon/web-builder-library/saas";
<InlineNotification
title="Note"
description="This action cannot be undone once confirmed."
variant="default"
/>;Variants
Default
Note
This action cannot be undone once confirmed.
Dark
Note
This action cannot be undone once confirmed.
Pro tip
You can drag and drop files directly into the upload area.
Changes saved
Your profile information has been updated successfully.
Unsaved changes
You have unsaved changes. Make sure to save before leaving.
Validation error
The email address you entered is already in use.
Info
Pro tip
You can drag and drop files directly into the upload area.
Success
Changes saved
Your profile information has been updated successfully.
Warning
Unsaved changes
You have unsaved changes. Make sure to save before leaving.
Destructive
Validation error
The email address you entered is already associated with another account.
Dismissible
Tips available
Check out our getting started guide for tips on using the platform.
Description Only
Passwords must be at least 8 characters and include a number.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | — | No | Optional title (displayed as heading) |
description | ReactNode | — | No | Main content/description |
variant | enum | default | No | Visual variant |
isDismissible | boolean | false | No | Whether the notification can be dismissed |
icon | ReactNode | — | No | Custom icon (overrides default variant icon) |
onDismiss | (() => void) | — | No | Callback when dismissed |
children | ReactNode | — | No | Children content (alternative to description) |