Lozenge

The signature Jira-style status pill: a small uppercase label communicating workflow state (To do, In progress, Done...). Use it wherever an item's status must be scannable at a glance — issue cards, tables, detail headers. It is purely presentational text; it is not interactive.

Root: .lozenge on <span>

Examples

Example 1

In progress

<span class="lozenge lozenge-inprogress">In progress</span>

Example 2

Done

<span class="lozenge lozenge-success lozenge-bold">Done</span>

Authoring tags — <lz-lozenge>

In progress Done

Authoring source

<lz-lozenge status="inprogress">In progress</lz-lozenge>
<lz-lozenge status="success" bold>Done</lz-lozenge>

Expands to

<span class="lozenge lozenge-inprogress" data-lz="lozenge" data-lz-version="0.1.0">In progress</span>
<span class="lozenge lozenge-success lozenge-bold" data-lz="lozenge" data-lz-version="0.1.0">Done</span>

Authoring tags are macro-expanded to the canonical HTML above at build time (Vite plugin or lz-expand CLI) — the shipped artifact has no runtime.

Contract

Variants & modifiers

Class	Axis	Rules
`lozenge-default`	status	one required · exclusive
`lozenge-inprogress`	status	one required · exclusive
`lozenge-moved`	status	one required · exclusive
`lozenge-new`	status	one required · exclusive
`lozenge-removed`	status	one required · exclusive
`lozenge-success`	status	one required · exclusive
`lozenge-bold`	modifier	optional

Accessibility

Text content is the accessible name — keep it meaningful (the visible status word). Color is never the only signal since the label text carries the state. The base .lozenge class has no background of its own: a status variant class is mandatory. Max width is 200px with truncation; avoid statuses long enough to truncate.

Nesting

Allowed in:

inline text
.issue-card-meta
table cells
detail headers
anywhere inline content is valid

Never inside (or containing):

.lozenge