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-badge status="info">2<span cds-layout="display:screen-reader-only"> items in an informational badge.</span></cds-badge>
<cds-badge status="success">3<span cds-layout="display:screen-reader-only"> items in a badge indicating success.</span></cds-badge>
<cds-badge status="warning">12<span cds-layout="display:screen-reader-only"> items in a badge indicating a warning.</span></cds-badge>
<cds-badge status="danger">15<span cds-layout="display:screen-reader-only"> items in a badge indicating an error.</span></cds-badge>
      

5 1 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-badge color="gray">1<span cds-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-badge color="purple">1<span cds-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-badge color="blue">15<span cds-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-badge color="orange">2<span cds-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-badge color="light-blue">3<span cds-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>