Inline feedback with bounded info, success, warning and danger tones. Choose status for polite updates or explicitly select alert for urgent messages. Visual severity does not infer urgency.
Full examples and variation matrix · Property playground · Automated stories
Public attributes and slots
Public attribute inventory| Attribute | Contract |
|---|
label | Fallback message or progress accessible name. Projected default content replaces message text. |
|---|
class | Consumer styling class; part=root identifies the owned surface. |
|---|
hidden | Native host visibility; hidden=until-found retains browser behavior. |
|---|
dir | Inherited native ltr or rtl direction. |
|---|
tone | info (default), success, warning or danger; unsupported values use info. |
|---|
role | status (default) or alert. Unsupported values use status; urgency is explicitly authored. |
|---|
Default slot replaces the label fallback. No named slots. Skeleton payload is decorative and inert.
Projected message
info: review the task details.info: review the task details.success: review the task details.success: review the task details.warning: review the task details.warning: review the task details.danger: review the task details.danger: review the task details.unsupported: review the task details.unsupported: review the task details.
{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-alert/cem-alert.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}