Badge Component - sirthxalot/vue-foundation-components GitHub Wiki

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

Basics

The default markup of a badge looks like the following example:

<badge>1</badge>

will be rendered into:

<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>
<badge id="messageCount">1</badge>

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.

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

Coloring

Badges can be colored with the same classes used for buttons and other components.

<badge color="primary">1</badge>
<badge color="secondary">1</badge>
<badge color="success">1</badge>
<badge color="alert">1</badge>
<badge color="warning">1</badge>

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

<badge>
  <i class="fi-share"></i>
</badge>
⚠️ **GitHub.com Fallback** ⚠️