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 label="87" style="secondary" />


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

Info badge:

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


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

Error badge:

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


An error badge displays numbers related to an error.

Success badge:

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


A success badge displays numbers related to a successful action.

Warning badge:

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


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.