Alert

<oblyx-alert> is a persistent status panel: an icon, a message, and an optional dismiss control. The message is the element's own light content, not an attribute: <oblyx-alert status="error">Something went wrong</oblyx-alert>, the same way a real call site would write it, not a heading or description attribute pair.

<oblyx-alert status="error">Something went wrong. Try again.</oblyx-alert>

oblyxAlert(status = OblyxAlertStatus.ERROR) { +"Something went wrong. Try again." }

Statuses

status is required and drives the panel tint and the default icon: info, warning, error, or success. Each status already has a matching glyph, so icon is only needed to override that default with a different one.

<oblyx-alert status="info">A new version is available.</oblyx-alert>
<oblyx-alert status="warning">Your session expires in five minutes.</oblyx-alert>
<oblyx-alert status="error">Something went wrong. Try again.</oblyx-alert>
<oblyx-alert status="success">Changes saved.</oblyx-alert>

oblyxAlert(status = OblyxAlertStatus.INFO) { +"A new version is available." }
oblyxAlert(status = OblyxAlertStatus.WARNING) { +"Your session expires in five minutes." }
oblyxAlert(status = OblyxAlertStatus.ERROR) { +"Something went wrong. Try again." }
oblyxAlert(status = OblyxAlertStatus.SUCCESS) { +"Changes saved." }

Size

sm steps padding, icon size, and message type scale down together as one compact mode, rather than as independent knobs.

<oblyx-alert status="info" size="md">Default size.</oblyx-alert>
<oblyx-alert status="info" size="sm">Compact size.</oblyx-alert>

oblyxAlert(status = OblyxAlertStatus.INFO, size = OblyxAlertSize.MD) { +"Default size." }
oblyxAlert(status = OblyxAlertStatus.INFO, size = OblyxAlertSize.SM) { +"Compact size." }

Container

card rounds every corner and is the default. section is square, for a full-width banner that spans the edge of its container rather than sitting inset as a card.

<oblyx-alert status="warning" container="card">Rounded on every corner, the default.</oblyx-alert>
<oblyx-alert status="warning" container="section">Square, for a full-width page banner.</oblyx-alert>

oblyxAlert(status = OblyxAlertStatus.WARNING, container = OblyxAlertContainer.CARD) {
  +"Rounded on every corner, the default."
}
oblyxAlert(status = OblyxAlertStatus.WARNING, container = OblyxAlertContainer.SECTION) {
  +"Square, for a full-width page banner."
}

Dismissible

Set dismissible to show a close button. Dismissal is one-way: clicking it hides the panel and fires a dismiss event on the element, rather than a callback attribute. There is no controlled-mode escape hatch; the panel always hides once clicked.

<oblyx-alert status="info" dismissible>You can dismiss this alert.</oblyx-alert>

oblyxAlert(status = OblyxAlertStatus.INFO, dismissible = true) {
  +"You can dismiss this alert."
}

Announcing an alert inserted after page load

By default, <oblyx-alert> renders no ARIA live-region role at all. That is deliberate, not an oversight: a live region only announces a DOM mutation observed by assistive technology while the region is already in the accessibility tree, and an alert present in the page's initial server-rendered HTML is mounted before any assistive technology has attached. An unconditional role would generally go unread on a page load and would be the wrong contract for a panel that simply sits on the page for the session's duration, which is how most alerts are used.

<oblyx-alert status="error">Something went wrong. Try again.</oblyx-alert>

oblyxAlert(status = OblyxAlertStatus.ERROR) { +"Something went wrong. Try again." }

Set announce when an alert is inserted dynamically after the page has already loaded. The common case is an HTMX fragment swapped in after a form submits, for example a validation error rendered into a target that was empty until the response arrived: the server renders announce directly on that fragment's markup, since the element does not exist in the page at all until the swap inserts it, so there is no separate step to add the attribute afterward. announce applies the correct live-region role for the alert's status: role="alert" (assertive) for error and warning, role="status" (polite) for info and success. Setting announce on a statically rendered alert is the mistake to avoid: an assertive role on content that was already there when the page loaded is a defect, not an accessibility improvement, because there is no mutation for assistive technology to observe.

<oblyx-alert status="error" announce>Something went wrong. Try again.</oblyx-alert>

oblyxAlert(status = OblyxAlertStatus.ERROR, announce = true) {
  +"Something went wrong. Try again."
}

Reference