Notification
Carbon ships several notification variants: InlineNotification — embedded in a page section, dismissable. ToastNotification — floating, auto-dismiss after timeout. ActionableNotification— with a primary action button. StackedNotification — list-style notifications for a notification center. NotificationButton — close button used inside any of the above.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Notification, NotificationButton, NotificationStatus } from "@avala/design"; <Notification> <NotificationButton /> <NotificationStatus /> </Notification>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
patterns-notification--defaultOpen in Storybook →
When to use
- **InlineNotification** — Embedded confirmation / warning / error directly inside a form, panel, or step.
- **ToastNotification** — Transient feedback after an action ("Saved", "Failed to load").
- **ActionableNotification** — When the user needs to take a follow-up action ("Connection lost — Retry").
- **StackedNotification** — Notification-center surfaces; the user opens a panel and sees a list of recent notifications.
When not to use
- Critical destructive confirms the user must answer → use `AlertDialog`, not a toast.
- Per-field validation messages inside a form → use `TextInput`
state="error"with helper text. - Status of an entity (online / idle / processing) → use `StatusIndicator`.