To use the badge component import the component in your JavaScript.

import '@cds/core/badge/register.js';

Status

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>
      

Color

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>
      

ColorCustom

2300+ 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.

34,000+ items. Item text for screen-readers should be added to badges in elements that will only be read in a screen-reader.

       <style>
    cds-badge.app-custom {
        --background: darkblue;
        --color: snow;
    }

    cds-badge.app-custom-2 {
        --background: fuchsia;
        --color: snow;
        --border-color: rgba(255, 255, 255, 0.7);
        --border-width: 0.1rem;
        --font-size: 0.7rem;
        --font-weight: bold;
        --size: 1.4rem;
        --padding: 0.1rem 0.3rem;
    }

    cds-badge.app-custom-3 {
        --background: limegreen;
        --color: darkgreen;
        --border-color: darkgreen;
        --border-width: 0.1rem;
        --font-size: 0.7rem;
        --font-weight: bolder;
        --size: 1.4rem;
        --padding: 0.1rem 0.3rem;
    }
</style>
<p>
    <cds-badge class="app-custom">2300+<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>
</p>
<p>
    <cds-badge class="app-custom-2">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>
</p>
<p>
    <cds-badge class="app-custom-3">34,000+<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>
</p>
      

DarkTheme

10 items in a dark theme default badge. 20 items in a dark theme info badge. 30 items in a dark theme success badge. 40 items in a dark theme warning badge. 50 items in a dark theme danger badge.

       <div cds-layout="horizontal gap:sm" cds-theme="dark">
    <cds-badge>10<span cds-layout="display:screen-reader-only"> items in a dark theme default badge.</span></cds-badge>
    </cds-badge>
    <cds-badge status="info">20<span cds-layout="display:screen-reader-only"> items in a dark theme info badge.</span></cds-badge>
    </cds-badge>
    <cds-badge status="success">30<span cds-layout="display:screen-reader-only"> items in a dark theme success badge.</span></cds-badge>
    </cds-badge>
    <cds-badge status="warning">40<span cds-layout="display:screen-reader-only"> items in a dark theme warning badge.</span></cds-badge>
    </cds-badge>
    <cds-badge status="danger">50<span cds-layout="display:screen-reader-only"> items in a dark theme danger badge.</span></cds-badge>
    </cds-badge>
</div>