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 <span>, but any tag will work fine.

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

<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>

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.

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.

<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>

Foundation Laravel Package