To use the badge component import the component in your JavaScript.
import'@cds/core/badge/register.js';
2 items in an informational badge.3 items in a badge indicating success.12 items in a badge indicating a warning.15 items in a badge indicating an error.
<cds-badgestatus="info">2<spancds-layout="display:screen-reader-only"> items in an informational badge.</span></cds-badge><cds-badgestatus="success">3<spancds-layout="display:screen-reader-only"> items in a badge indicating success.</span></cds-badge><cds-badgestatus="warning">12<spancds-layout="display:screen-reader-only"> items in a badge indicating a warning.</span></cds-badge><cds-badgestatus="danger">15<spancds-layout="display:screen-reader-only"> items in a badge indicating an error.</span></cds-badge>
51
item. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.1
item. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.15
items. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.2
items. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.3
items. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.
<cds-badge>5</cds-badge><cds-badgecolor="gray">1<spancds-layout="display:screen-reader-only">
item. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.</span></cds-badge><cds-badgecolor="purple">1<spancds-layout="display:screen-reader-only">
item. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.</span></cds-badge><cds-badgecolor="blue">15<spancds-layout="display:screen-reader-only">
items. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.</span></cds-badge><cds-badgecolor="orange">2<spancds-layout="display:screen-reader-only">
items. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.</span></cds-badge><cds-badgecolor="light-blue">3<spancds-layout="display:screen-reader-only">
items. Item text for screen-readers should be added to badges in elements that will only be read in a
screen-reader.</span></cds-badge>