Badge

The badge is a basic component that displays a number. It's useful for calling out a number of unread items.

Basics

Add the .badge class to an element to create a badge. In the below example, we're using <span>, but any tag will work fine.

Watch this part in video

<span class="badge">1</span>

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.

<h1 aria-describedby="messageCount">Unread Messages</h1>
<span class="badge" id="messageCount">1</span>

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.

<span class="badge" id="messageCount">1 <span class="show-for-sr">unread message</span></span>

Coloring

Add color classes to give badges additional meaning.

Watch this part in video

<span class="badge primary">1</span>
<span class="badge secondary">2</span>
<span class="badge success">3</span>
<span class="badge alert">A</span>
<span class="badge warning">B</span>

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.

$badge-palette: map-remove($foundation-palette, (
    primary,
    secondary
)) !default;

Or you can add more colors to the default palette.

$badge-palette: map-merge($foundation-palette, (
    purple: #bb00ff
)) !default;

Or you can define your own custom badge palette.

$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 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 here, but any icon fonts or image-based icons will work fine.

Watch this part in video

<span class="badge secondary"><i class="fi-share"></i></span>
<span class="badge success"><i class="fi-check"></i></span>
<span class="badge warning"><i class="fi-wrench"></i></span>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$badge-background`	Color	`$primary-color`	Default background color for badges.
`$badge-color`	Color	`$white`	Default text color for badges.
`$badge-color-alt`	Color	`$black`	Alternate text color for badges.
`$badge-palette`	Map	`$foundation-palette`	Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
`$badge-padding`	Number	`0.3em`	Default padding inside badges.
`$badge-minwidth`	Number	`2.1em`	Minimum width of a badge.
`$badge-font-size`	Number	`0.6rem`	Default font size for badges.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

badge

@include badge;

Generates the base styles for a badge.