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-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>
Color
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>
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-badgeclass="app-custom">2300+<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></p><p><cds-badgeclass="app-custom-2">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></p><p><cds-badgeclass="app-custom-3">34,000+<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></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.
<divcds-layout="horizontal gap:sm"cds-theme="dark"><cds-badge>10<spancds-layout="display:screen-reader-only"> items in a dark theme default badge.</span></cds-badge></cds-badge><cds-badgestatus="info">20<spancds-layout="display:screen-reader-only"> items in a dark theme info badge.</span></cds-badge></cds-badge><cds-badgestatus="success">30<spancds-layout="display:screen-reader-only"> items in a dark theme success badge.</span></cds-badge></cds-badge><cds-badgestatus="warning">40<spancds-layout="display:screen-reader-only"> items in a dark theme warning badge.</span></cds-badge></cds-badge><cds-badgestatus="danger">50<spancds-layout="display:screen-reader-only"> items in a dark theme danger badge.</span></cds-badge></cds-badge></div>