Clay Badges

Badges help highlight important information such as notifications or new and unread messages. Badges have circular borders and are only used to specify a number. This covers the different types of Clay badges you can add to your app.

Badge Types

The following badge styles are available:

Primary badge:

<div class="col-md-1">
    <clay:badge label="8" />


A primary badge is bright blue, commanding attention like the primary button of a form.

Secondary badge:

<div class="col-md-1">
    <clay:badge displayType="secondary" label="87" />


A secondary badge is light-grey and draws less focus than a primary button.

Info badge:

<div class="col-md-1">
    <clay:badge displayType="info" label="91" />


A info badge is dark blue and meant for numbers related to general information.

Error badge:

<div class="col-md-1">
    <clay:badge displayType="danger" label="130" />


An error badge displays numbers related to an error.

Success badge:

<div class="col-md-1">
    <clay:badge displayType="success" label="1111" />


A success badge displays numbers related to a successful action.

Warning badge:

<div class="col-md-1">
    <clay:badge displayType="warning" label="21" />


A warning badge displays numbers related to warnings that should be addressed.

Now you know how to use badges to keep track of values in your app.