Component · Feedback
Inline notice
an in-flow severity banner for a message tied to the surrounding content — not a transient toast.
Example
Your trial ends in 3 days.
Changes saved.
Storage is almost full.
We couldn't charge your card.
Playground
Your trial ends in 3 days.
variant
dismissible
Where available
✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|
| React | <InlineNotice> | @design-foundry/lucent-react |
| Angular | <lucent-inline-notice> | @design-foundry/lucent |
| Web Components | <lucent-inline-notice> | @design-foundry/lucent-wc |
| Blazor | <LucentInlineNotice> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|
| variant | info | success | warning | error | info | severity + default glyph. |
| heading | string | — | optional bold title line. |
| icon | string | — | override the per-variant glyph. |
| dismissible | boolean | false | shows a dismiss button. |
| (children) | slotted | — | the message body. |
check_circleDo
use it for a message tied to a region of the page (a form section, a settings panel).
cancelDon't
use it for transient confirmations — reach for Toast or Snackbar instead.