Lozenges

Ask a question Design guidelines

Summary

Coloured text lozenge, primarily for displaying status. Available in a standard and subtle variations.

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-lozenge
AMD Module key: N/A
Experimental since: 5.0
General API status: 5.1

Examples

default success error current complete moved

default success error current complete moved

Code

HTML

Markup is simply a span with base class and type class:

Options

Lozenge type Lozenge type class
Generic (no type class)
Success aui-lozenge-success
Error aui-lozenge-error
Current aui-lozenge-current
Complete aui-lozenge-complete
Moved aui-lozenge-moved

HTML options

To use the subtle variant, simply add the class aui-lozenge-subtle as well as the type class.