C&C Docs
Log in

cnc-alert

An inline status message: an icon, a title, a body, and an optional dismiss control. The kind picks the whole palette — background, border, icon, title and body colour — and supplies a default icon, so a useful alert is two attributes long.

Quick start

Set a kind and a title. The body can be a content attribute or slotted markup; the icon is chosen for you.

Saved
Your changes have been published. 
<cnc-alert
  kind="success"
  title="Saved"
  content="Your changes have been published."
></cnc-alert>

Known gaps

  • Nothing is announced. The widget sets no role="alert" and no aria-live, so an alert that appears in response to an action is invisible to a screen reader until the user happens to navigate onto it. Wrap it in your own <div role="alert"> if the message is the result of something the user just did.
  • The dismiss control is mouse-only. It is a div with a click handler — no tabindex, no role, no accessible name. It cannot be reached by keyboard at all, and a screen reader reads it as an unlabelled graphic.
  • title is also the native tooltip. Usage attributes stay on the host element, and title is a global HTML attribute — so hovering an alert shows the browser's own tooltip repeating the heading.

Usage guidance

An alert is for a message that belongs to a place on the page — a form that failed validation, a banner about scheduled downtime. For a message that belongs to a moment rather than a place, use cnc-toast, which stacks, times out and gets out of the way. Reserve danger for things that actually failed; an alert stack in which everything is red tells the reader nothing. Do not make an alert closable unless dismissing it is meaningful — the widget cannot bring itself back, so a dismissed alert is gone until the page re-renders or your own state puts it back.

← Back to Widgets