--- title: Badge description: The badge is a basic component that displays a number. It's useful for calling out a number of unread items. sass: scss/components/_badge.scss video: '_S_OO9NiWQ8' --- ## Basics Add the `.badge` class to an element to create a badge. In the below example, we're using ``, but any tag will work fine.

```html_example 1 ```
A badge will typically be describing another element on the page. To bind the two elements together, give the badge a unique ID, and reference that ID in an `aria-describedby` attribute on the main element. ```html

Unread Messages

1 ``` Finally, the content itself might need more context for users that use screen readers. You can add extra text inside the badge using the `.show-for-sr` class. ```html 1 ``` --- ## Coloring Add color classes to give badges additional meaning.

Watch this part in video

```html_example 1 2 3 A B ``` --- ### Custom Colors If you're using the Sass version of Foundation, you can customize the badge classes by editing the `$badge-palette` map in your settings file. The badge palette defaults to `$foundation-palette`. If you don't need certain colors from the default palette, simply remove them from the list. ```scss $badge-palette: map-remove($foundation-palette, ( primary, secondary )) !default; ``` Or you can add more colors to the default palette. ```scss $badge-palette: map-merge($foundation-palette, ( purple: #bb00ff )) !default; ``` Or you can define your own custom badge palette. ```scss $badge-palette: ( black: #000000, red: #ff0000, purple: #bb00ff ) !default; ``` --- ### Text Colors The text color for each badge class is determined by either `$badge-color` or `$badge-color-alt`, whichever settings variable has more contrast.

The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](https://webaim.org/resources/contrastchecker/) when changing color variables. To give all badges the same color text, set `$badge-color` and `$badge-color-alt` to the same value — but know that doing so may decrease accessibility.

--- ## Icons An icon can be used in place of text. We're using the [Foundation icon font](https://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.

Watch this part in video

```html_example ```