1 viewer
Component · Feedback
Banner
Persistent inline notification bar.
- Category
- Feedback
- Slots
- 3
- States
- 4
- Writer
- Shared
Preview
<Banner body="Next epoch transition scheduled in 240 seconds. Validator nodes syncing." intent="warning" title="Consensus Epoch Roll" />
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-banner |
| title | .primitive-banner__title |
| body | .primitive-banner__body |
- Modifier
- primitive-banner--{intent}
- State attribute
- data-intentfrom the intent prop
- Role
- status
- Role by state
- error → alert
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
| native | native-adapter | experimental |
Accessibility
Persistent inline notification bar with variant coloring.
- Informational, success, and warning banners expose status semantics with a polite live region.
- Error banners upgrade to alert semantics and preserve the announced title/detail relationship.