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

1 10 815 50 30+

Code

HTML

Options

Badge type Badge type class
Default (no type class)
Primary aui-badge-primary

Variations

Use the primary badge when the number is the more important or prominent piece of data than its label or description.

HTML deprecated

The use of aui-badge class will be deprecated. Use the web component API instead.

Soy deprecated