Notification
Inline, actionable notification banner that surfaces a titled message with an optional recovery action
Category: feedback · WCAG 2.2-AA · notification, banner, message, feedback, actionable
Variants
- info
- success
- warning
- error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Title text for the component. |
description | ReactNode | — | Supporting description text. |
variant | 'info' | 'success' | 'warning' | 'error' | info | Selects the visual style variant. |
dismissible | boolean | false | When true, shows a control to dismiss the component. |
onDismiss | () => void | — | Called when the component is dismissed. |
actions | ReactNode | — | Action elements shown in the notification. |
icon | ReactNode | — | Icon element rendered in the component. |
labels | { dismiss?: string } | — | Overrides for the component’s user-visible strings (i18n). |
Design tokens
--cascivo-color-info--cascivo-color-success--cascivo-color-warning--cascivo-color-destructive--cascivo-color-border--cascivo-color-surface--cascivo-radius-surface--cascivo-motion-enter--cascivo-motion-exit
When to use
- Surfacing a prominent, often actionable message in the page flow (sync result, failed upload, available update)
- Pairing a status message with one or more recovery actions via the actions slot
- Communicating outcomes that should persist until the user reads or acts on them
When not to use
- Transient, auto-dismissing feedback that floats above the layout — use Toast
- A terse single-line action status next to a control — use InlineLoading
- Blocking the user for a required decision — use Modal or AlertDialog
How to build an accessible Notification in React →
Examples
Info
<Notification variant="info" title="Sync complete" description="Your files are up to date." />Dismissible
<Notification variant="success" title="Saved" dismissible onDismiss={handleDismiss} />Actionable
<Notification variant="error" title="Upload failed" description="The connection dropped." actions={<Button onClick={retry}>Retry</Button>} />