Skip to main content Skip to navigation Skip to search

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.

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.

Custom

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.

Theme

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.