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

    <div>Primary</div>
</div>

Secondary badge:

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

    <div>Secondary</div>
</div>

Info badge:

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

    <div>Info</div>
</div>

Error badge:

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

    <div>Error</div>
</div>

Success badge:

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

    <div>Success</div>
</div>

Warning badge:

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

    <div>Warning</div>
</div>

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

Related Topics

• Clay Labels and Links
• Clay Cards
• Clay Stickers

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center