NoticeBanner

<caos-notice-banner>

a persistent page- or section-level notice that a toast would be wrong for, because it needs a decision or must not disappear

May be placed on a record page, an app’s home page, a page inside an app and a step of a guided flow.

Inputs

Name	Attribute	Description	Type	Default	Required
`intent`	`intent`, markup only	Which semantic tint to draw: info, success, warning or danger. These read the semantic colour tokens rather than the brand accent, so a danger banner stays red when a tenant repaints the accent. `error` is accepted as an alias for danger.	text — one of info, success, warning, danger, error	info	Optional
`title`	`title`, markup only	The heading above the body, in the tint’s darker on-tint ink. Unset, the heading line is not drawn and the body stands on its own. This is the standard HTML `title` attribute, so it is also the element’s hover tooltip.	text	none declared	Optional
`dismissable`	`dismissable`, markup only	Show the close control. Set it only where losing the notice costs nothing — a banner that carries a decision should not have one.	boolean	false	Optional

Events

Name	When it fires	What it carries
`caos-notice-dismiss`	The close control is pressed. It is cancelable, and it is the banner itself that acts on the result: unless a listener calls `preventDefault()`, the banner removes itself from the page. Cancel it to keep the banner and decide for yourself — to record the dismissal first, or to refuse it.	nothing

Slots

Name	What goes in it
the default slot	The body — the notice itself, in a sentence or two.
`actions`	The decision controls, drawn at the right-hand end of the banner.

Styling hooks

Design token	What it controls
`--caos-color-info-bg`	The fill of the default (info) banner; the edge is mixed from –caos-color-info.
`--caos-color-info`	The glyph on an info banner, and the colour its edge is mixed from.
`--caos-color-info-text`	The heading on an info banner — the on-tint ink, so it holds up in both themes.
`--caos-color-info-text-muted`	The body and the close control on an info banner.
`--caos-color-success-bg`	The fill of a success banner.
`--caos-color-success`	Its glyph, and the colour its edge is mixed from.
`--caos-color-success-text`	Its heading.
`--caos-color-success-text-muted`	Its body.
`--caos-color-warning-bg`	The fill of a warning banner.
`--caos-color-warning`	Its glyph, and the colour its edge is mixed from.
`--caos-color-warning-text`	Its heading.
`--caos-color-warning-text-muted`	Its body.
`--caos-color-danger-bg`	The fill of a danger banner.
`--caos-color-danger`	Its glyph, and the colour its edge is mixed from.
`--caos-color-danger-text`	Its heading.
`--caos-color-danger-text-muted`	Its body.
`--caos-radius`	The corner radius of the banner.
`--caos-radius-sm`	The corners of the close control and its focus ring.
`--caos-focus-ring`	The ring on the close control when it is reached by keyboard.
`--caos-font`	The typeface the banner is set in.
`--caos-text-row`	The size of the heading.
`--caos-space-4`	The horizontal padding.
`--caos-space-3`	The vertical padding, and the gap between the glyph and the content.
`--caos-space-2`	The gap between controls in the actions slot.
`--caos-space-1`	The inset of the first slotted action.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
`::part(banner)`	the banner	Always
`::part(icon)`	the intent glyph	Always
`::part(content)`	the title and the body together	Always
`::part(title)`	the title line	Always
`::part(dismiss)`	the dismiss control	Always

When to use it

A condition the surface is in that must stay visible — because it needs a decision, because it changes how the page should be read, or because it will still be true in ten minutes.

What to use instead

Toast — The message is the OUTCOME of something the person just did, and nothing is lost by missing it — “Changes saved”, “Copied”. The test is time and agency: a toast is gone in seconds and carries no decision, so anything a person has to act on, refer back to, or read again must not be one. Conversely, a banner for a routine save leaves a page accumulating strips of stale congratulation nobody clears.
ValidationSummary — A save was rejected and there is a list of field errors. That piece counts them, links each one to its field and moves the caret there; a danger banner would say the same thing once, without any of the links.
ErrorPanel — The surface itself failed and there is nothing to sit above. A banner qualifies content; when there is no content, the panel takes its place.
InlineHint — The note explains one field and is true always, not just now. That belongs under the field, in muted text, not in a tinted strip across the page.

Accessibility

The role is chosen from the intent and does not have to be set: info, success and warning are role="status", announced politely at the next pause, and danger (or the error alias) is role="alert", announced immediately. The glyph is hidden because the copy carries the meaning, and the close control is a real button with an accessible name and its own focus ring. Left to the author: reserving danger for what genuinely interrupts — every banner rendered as danger trains people to ignore alerts — and putting real focusable controls in the actions slot, since that is where a person announced at will go looking for the decision.

Examples

A condition of the page

The ordinary case: a heading and a sentence explaining something about this surface that was true before the person arrived and will still be true when they leave.

{
  "id": "example",
  "section": "A condition of the page",
  "columns": 1,
  "items": [
    {
      "id": "notice_banner_1",
      "type": "component",
      "key": "notice_banner",
      "inputs": {
        "intent": "info",
        "title": "This period is closed for editing"
      },
      "children": [
        "The period this record belongs to closed on 30 June. An administrator has to reopen it before anything here can be changed."
      ]
    }
  ]
}

<caos-notice-banner intent="info" title="This period is closed for editing">The period this record belongs to closed on 30 June. An administrator has to reopen it before anything here can be changed.</caos-notice-banner>

Asking for a decision

The reason a banner is not a toast: it stays on screen holding the two controls that resolve it, so the choice can be made after reading the page rather than in the four seconds before a notice fades.

{
  "id": "example",
  "section": "Asking for a decision",
  "columns": 1,
  "items": [
    {
      "id": "notice_banner_1",
      "type": "component",
      "key": "notice_banner",
      "inputs": {
        "intent": "warning",
        "title": "This record has unsaved changes from another session"
      },
      "children": [
        "Somebody else edited this record while you had it open. Choose which version to keep.",
        {
          "id": "button_2",
          "type": "component",
          "key": "button",
          "inputs": {
            "variant": "primary",
            "size": "sm"
          },
          "slot": "actions",
          "children": [
            "Keep mine"
          ]
        },
        {
          "id": "button_3",
          "type": "component",
          "key": "button",
          "inputs": {
            "size": "sm"
          },
          "slot": "actions",
          "children": [
            "Load theirs"
          ]
        }
      ]
    }
  ]
}

<caos-notice-banner intent="warning" title="This record has unsaved changes from another session">
  Somebody else edited this record while you had it open. Choose which version to keep.
  <caos-button slot="actions" variant="primary" size="sm">Keep mine</caos-button>
  <caos-button slot="actions" size="sm">Load theirs</caos-button>
</caos-notice-banner>

The four intents

Every tint side by side, so the right one can be picked by looking — and so the jump in loudness from warning to danger is visible before it is chosen for something routine.

{
  "id": "example",
  "section": "The four intents",
  "columns": 1,
  "items": [
    {
      "id": "notice_banner_1",
      "type": "component",
      "key": "notice_banner",
      "inputs": {
        "intent": "info"
      },
      "children": [
        "This order is a revision of ORD-4471."
      ]
    },
    {
      "id": "notice_banner_2",
      "type": "component",
      "key": "notice_banner",
      "inputs": {
        "intent": "success"
      },
      "children": [
        "Approved by Dana Whitfield on 12 June."
      ]
    },
    {
      "id": "notice_banner_3",
      "type": "component",
      "key": "notice_banner",
      "inputs": {
        "intent": "warning"
      },
      "children": [
        "The due date is less than five working days away."
      ]
    },
    {
      "id": "notice_banner_4",
      "type": "component",
      "key": "notice_banner",
      "inputs": {
        "intent": "danger"
      },
      "children": [
        "This account is on hold. Nothing below can be submitted until it is cleared."
      ]
    }
  ]
}

<caos-notice-banner intent="info">This order is a revision of ORD-4471.</caos-notice-banner>
<caos-notice-banner intent="success">Approved by Dana Whitfield on 12 June.</caos-notice-banner>
<caos-notice-banner intent="warning">The due date is less than five working days away.</caos-notice-banner>
<caos-notice-banner intent="danger">This account is on hold. Nothing below can be submitted until it is cleared.</caos-notice-banner>

Dismissable

The close control, and the part worth knowing: the banner takes ITSELF off the page unless a listener cancels the event. Use the reset control on this stage to bring it back.

{
  "id": "example",
  "section": "Dismissable",
  "columns": 1,
  "items": [
    {
      "id": "notice_banner_1",
      "type": "component",
      "key": "notice_banner",
      "inputs": {
        "intent": "success",
        "title": "Reference data refreshed",
        "dismissable": true
      },
      "children": [
        "Regions, teams and price lists were updated from the source system this morning."
      ]
    }
  ]
}

<caos-notice-banner intent="success" title="Reference data refreshed" dismissable>Regions, teams and price lists were updated from the source system this morning.</caos-notice-banner>