Inline Notification
A static inline banner that communicates contextual feedback — informational, success, warning, or error. Renders as a live region so screen readers are notified automatically.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
state | 'info' | 'success' | 'warning' | 'error' | 'info' | Semantic state. Controls background colour, border colour, status icon, and ARIA live region role. Use 'error' for critical issues (assertive) and all others for non-blocking messages (polite). |
heading | string | '' | Bold heading text rendered above the description. Omit when the description alone is sufficient. |
description | string | '' | Description text. When empty the default slot is rendered instead, allowing rich markup (links, <strong>, etc.). |
dismissButton | boolean | true | Whether to show the dismiss (×) icon button. Set to false for persistent notifications the user should not be able to dismiss. |
actionLabel | string | undefined | Optional label for a secondary action button. When set, a diwa-button-pure with an arrow icon is rendered. Clicking it emits the action event. |
actionLoading | boolean | false | Shows a spinner on the action button and blocks interaction. Has no effect when actionLabel is not set. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. Reflects data-theme onto the host so the light-mode design token overrides in app.css cascade into the Shadow DOM. |
Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
dismiss | void | No | Emitted when the dismiss (×) button is clicked. The consumer is responsible for removing or hiding the notification. |
action | void | No | actionLabel is set and the button is not in a loading state. |
When using in React (JSX), listen via ondismiss and onaction (lowercase) — React 19 maps onXxx → addEventListener('Xxx', ...) without lowercasing.
Slots
| Slot | Description |
|---|---|
default | Fallback description content rendered when the description prop is empty. Allows rich markup — links, <strong>, etc. |
CSS Custom Properties
No CSS custom properties are exposed in V1. All colours are derived from the global --diwa-notification-* and --diwa-color-* tokens defined in app.css. Theme overrides cascade automatically via the data-theme attribute on the host element.