Documentation

Lozenges

Code snippetsDesign 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
Experimental since:5.0
General API status:5.1

Examples

default success error current new moved

default success error current new moved

Code

HTML

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

<span class="aui-lozenge aui-lozenge-success">Success</span>

Options

Lozenge typeLozenge type class
Generic(no type class)
Successaui-lozenge-success
Erroraui-lozenge-error
Currentaui-lozenge-current
Completeaui-lozenge-complete
Movedaui-lozenge-moved

HTML Options

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

<span class="aui-lozenge aui-lozenge-subtle aui-lozenge-success">Success</span>