A visible count or status label. Use cem-alert for announced feedback. Badge color complements its text; it adds no live region.
Full examples and variation matrix · Property playground · Automated stories
Default slot replaces label fallback. Attribute presence enables boolean options, including the text “false”. Inert payload options take effect in the consuming component shown in the gallery. Native descendants retain keyboard behavior.
{slice @name=label | Ready}{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=class | }{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=tone | info}{fieldset @role=group @aria-label="tone" @slice=tone @slice-event=change @slice-value="$target.value" | {legend | tone}{cem-radio @name="property-tone" @value="info" @label="info" @checked={if datadom.slices.tone == "info" {true} else {null}}}{cem-radio @name="property-tone" @value="success" @label="success" @checked={if datadom.slices.tone == "success" {true} else {null}}}{cem-radio @name="property-tone" @value="warning" @label="warning" @checked={if datadom.slices.tone == "warning" {true} else {null}}}{cem-radio @name="property-tone" @value="danger" @label="danger" @checked={if datadom.slices.tone == "danger" {true} else {null}}}}
{slice @name=dir | ltr}{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=hidden | absent}{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{slice @name=content | fallback}{fieldset @role=group @aria-label="content" @slice=content @slice-event=change @slice-value="$target.value" | {legend | content}{cem-radio @name="property-content" @value="fallback" @label="fallback" @checked={if datadom.slices.content == "fallback" {true} else {null}}}{cem-radio @name="property-content" @value="projected" @label="projected" @checked={if datadom.slices.content == "projected" {true} else {null}}}}
{cem-badge @label="{$datadom.slices.label}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @tone="{$datadom.slices.tone}" @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem:if @test='datadom.slices.content == "projected"' | {strong | Projected content}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-badge/cem-badge.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}}