Badges

Ask a question Design guidelines

Summary

Badges provide quick visual identification for numeric values such as tallies and other quantities. They are not used for anything other than integers. For statuses, use Lozenges. To call out tags or other high-visibility attributes, use Labels.

Status

API status:	general
Included in AUI core?	Yes. You do not need to explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-badge`
AMD Module key:	N/A
Experimental since:	5.0
General API status:	5.1

Examples

Code

HTML

<aui-badge>19</aui-badge>

HTML deprecated

The use of aui-badge class will be deprecated.

<span class="aui-badge">19</span>

Soy deprecated

{call aui.badges.badge}
  {param text: '19' /}
{/call}