Lozenges
Summary
Small status chips: bold, uppercase, glanceable. The default
look is solid (a status chip is chrome: it should read
from across the room), with a -subtle modifier for
quieter contexts - the same chrome-vs-content rule flags,
banners, and messages follow. Colors come from the
--neura-color-status-* tokens shared with
messages and banners.
When to use
| Variant | Use it for |
|---|---|
Default.neura-lozenge | Neutral state ("draft", "unassigned"). |
Success.neura-lozenge-success | Positive outcomes ("online", "approved"). |
Error.neura-lozenge-error | Failures ("offline", "rejected"). |
Current.neura-lozenge-current | In-progress states ("running", "pending"). |
Complete.neura-lozenge-complete | Finished, informational ("done", "archived"). |
Moved.neura-lozenge-moved | Relocated / renamed entities. |
Subtle.neura-lozenge-subtle | Modifier on any variant: outline style for dense tables where solid chips would shout. |
Inside the headings of a hero or marketing
page header
(h1/h2), a lozenge automatically
gets a 10px inline-start margin and a small upward nudge so
it sits optically centered next to the oversized title text.
Examples
Solid (default)
Subtle
HTML
<!-- Solid (default) -->
<span class="neura-lozenge">Default</span>
<span class="neura-lozenge neura-lozenge-success">Success</span>
<span class="neura-lozenge neura-lozenge-error">Error</span>
<span class="neura-lozenge neura-lozenge-current">Current</span>
<span class="neura-lozenge neura-lozenge-complete">Complete</span>
<span class="neura-lozenge neura-lozenge-moved">Moved</span>
<!-- Subtle -->
<span class="neura-lozenge neura-lozenge-subtle">Default</span>
<span class="neura-lozenge neura-lozenge-success neura-lozenge-subtle">Success</span>
<span class="neura-lozenge neura-lozenge-error neura-lozenge-subtle">Error</span>
<span class="neura-lozenge neura-lozenge-current neura-lozenge-subtle">Current</span>
<span class="neura-lozenge neura-lozenge-complete neura-lozenge-subtle">Complete</span>
<span class="neura-lozenge neura-lozenge-moved neura-lozenge-subtle">Moved</span>AUI compatibility
Full parity: aui-lozenge* classes alias onto the
neura-lozenge* rules. CSS-only; no JS API.