components

Lozenge

Lozenges are colored text labels used to display status, category, or metadata. They come in seven colors (blue, green, red, yellow, grey, purple, teal) with solid and subtle themes. Use Lozenge for short text labels — for numeric counts, use Badge instead.

Import

import { Lozenge } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Display status labels (Completed, In Progress, Failed, Pending).
+Show category tags or filter chips.
+Provide colored text labels for quick visual scanning.

When not to use

−For numeric counts — use Badge instead.
−For long descriptive text — Lozenge is for short labels only.
−For interactive selection — use InputCheckbox or InputRadio.

Examples

Code Samples

Default

A basic lozenge with default styling.

import { Lozenge } from "@skedulo/breeze-ui-react";

export default function DefaultLozenge() {
  return <Lozenge>Default</Lozenge>;
}

Colors (Solid)

Lozenges support a variety of semantic colors with a solid theme for higher visual emphasis.

import { Lozenge } from "@skedulo/breeze-ui-react";

export default function LozengeSolidColors() {
  return (
    <div className="flex gap-2 flex-wrap">
      <Lozenge color="blue" theme="solid">Blue</Lozenge>
      <Lozenge color="green" theme="solid">Green</Lozenge>
      <Lozenge color="red" theme="solid">Red</Lozenge>
      <Lozenge color="yellow" theme="solid">Yellow</Lozenge>
      <Lozenge color="grey" theme="solid">Grey</Lozenge>
      <Lozenge color="purple" theme="solid">Purple</Lozenge>
      <Lozenge color="teal" theme="solid">Teal</Lozenge>
    </div>
  );
}

Colors (Subtle)

The subtle theme provides a softer appearance for less prominent labels.

import { Lozenge } from "@skedulo/breeze-ui-react";

export default function LozengeSubtleColors() {
  return (
    <div className="flex gap-2 flex-wrap">
      <Lozenge color="blue" theme="subtle">Blue</Lozenge>
      <Lozenge color="green" theme="subtle">Green</Lozenge>
      <Lozenge color="red" theme="subtle">Red</Lozenge>
      <Lozenge color="yellow" theme="subtle">Yellow</Lozenge>
      <Lozenge color="grey" theme="subtle">Grey</Lozenge>
      <Lozenge color="purple" theme="subtle">Purple</Lozenge>
      <Lozenge color="teal" theme="subtle">Teal</Lozenge>
    </div>
  );
}

Sizes

Lozenges come in default and small sizes.

import { Lozenge } from "@skedulo/breeze-ui-react";

export default function LozengeSizes() {
  return (
    <div className="flex items-center gap-2">
      <Lozenge color="blue" size="small">Small</Lozenge>
      <Lozenge color="blue">Default</Lozenge>
    </div>
  );
}

With Leading Icon

Lozenges can include a leading icon for additional visual context.

import { Lozenge } from "@skedulo/breeze-ui-react";

export default function LozengeWithIcon() {
  return (
    <div className="flex gap-2 flex-wrap">
      <Lozenge color="green" leadingIcon="tickFill">Completed</Lozenge>
      <Lozenge color="blue" leadingIcon="activity">In Progress</Lozenge>
      <Lozenge color="red" leadingIcon="warning">Failed</Lozenge>
    </div>
  );
}

Deletable

Use canDelete to show a remove button on the lozenge, useful for removable tags or filters.

import { Lozenge } from "@skedulo/breeze-ui-react";

export default function LozengeDeletable() {
  return (
    <div className="flex gap-2 flex-wrap">
      <Lozenge color="blue" canDelete>Removable Tag</Lozenge>
      <Lozenge color="green" canDelete>Another Tag</Lozenge>
      <Lozenge color="purple" canDelete>Filter</Lozenge>
    </div>
  );
}

Disabled

Disabled lozenges are visually muted and non-interactive.

import { Lozenge } from "@skedulo/breeze-ui-react";

export default function LozengeDisabled() {
  return (
    <div className="flex gap-2">
      <Lozenge color="blue" disabled>Disabled</Lozenge>
      <Lozenge color="green" disabled canDelete>Disabled Deletable</Lozenge>
    </div>
  );
}

Guidelines

Do

✓Use consistent color assignments for the same status across the app (e.g. green = success, red = error).
✓Use the subtle theme for secondary or less important labels.
✓Use leadingIcon to reinforce the status meaning visually.
✓Use canDelete for removable filter tags.
✓Keep lozenge text to 1-2 words maximum.

Don't

✗Don't use more than 3-4 different colors in the same view.
✗Don't use solid theme for every lozenge — reserve solid for emphasis.
✗Don't use Lozenge for actions — it's a display-only component.
✗Don't put lozenges inside other lozenges or badges.

API Reference

Prop	Type	Default	Description
color	"blue" \| "green" \| "red" \| "yellow" \| "grey" \| "purple" \| "teal"	"grey"	The color theme of the lozenge.
theme	"solid" \| "subtle"	"subtle"	Controls the visual intensity of the lozenge. Solid uses a filled background, while subtle uses a lighter background for reduced visual weight.
size	"default" \| "small"	"default"	The size of the lozenge. Use small for compact or inline contexts.
leadingIcon	string	—	The name of a Breeze icon to display before the lozenge text.
canDelete	boolean	false	When true, shows a delete button on the lozenge allowing the user to remove it.
disabled	boolean	false	Prevents user interaction and applies a disabled visual style.

Related Components

Badge Alert Button