Lozenge
A compact status pill for communicating status at a glance. Lozenges are uppercase, bold, and small — ideal for inline status indicators in tables, cards, or list items.
Appearance (subtle)
The default subtle style uses a light tinted background with a matching text color.
DefaultIn ProgressMovedNewRemovedSuccess
vue
<Lozenge appearance="default">Default</Lozenge>
<Lozenge appearance="inprogress">In Progress</Lozenge>
<Lozenge appearance="moved">Moved</Lozenge>
<Lozenge appearance="new">New</Lozenge>
<Lozenge appearance="removed">Removed</Lozenge>
<Lozenge appearance="success">Success</Lozenge>Bold
Bold lozenges use a solid fill, providing higher contrast for situations that need more visual weight.
DefaultIn ProgressMovedNewRemovedSuccess
vue
<Lozenge appearance="default" :is-bold="true">Default</Lozenge>
<Lozenge appearance="inprogress" :is-bold="true">In Progress</Lozenge>
<Lozenge appearance="moved" :is-bold="true">Moved</Lozenge>
<Lozenge appearance="new" :is-bold="true">New</Lozenge>
<Lozenge appearance="removed" :is-bold="true">Removed</Lozenge>
<Lozenge appearance="success" :is-bold="true">Success</Lozenge>Max width
Long text is truncated with an ellipsis when it exceeds maxWidth (default 200px).
Very long status label here
vue
<Lozenge appearance="inprogress" :max-width="100">Very long status label here</Lozenge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success' | 'default' | Color scheme |
isBold | boolean | false | Solid fill (bold) vs. light tint (subtle) |
maxWidth | number | 200 | Max width in pixels before text is truncated |
Slots
| Slot | Description |
|---|---|
default | Lozenge text |