Lozenge

A small, non-interactive status label (pill).

When to use

Use Lozenge for static status labels such as "Active", "Pending" or "Draft". It renders a <div> with its text in a <span> and is not interactive.

There is no @uxf/form twin. For an interactive or removable tag use Chip; for a numeric count use Badge.

Usage

import { Lozenge } from "@uxf/ui/lozenge";

<Lozenge color="green" variant="muted">Active</Lozenge>

Props

Extends HTMLAttributes<HTMLDivElement>, so standard <div> attributes (className, children, …) are accepted.

Variants & states

Built-in values (from theme.ts):

LozengeColors and LozengeVariants are open interfaces, so a project can add its own values via module augmentation:

// lozenge.d.ts
declare module "@uxf/ui/lozenge/theme" {
    interface LozengeColors {
        brand: true;
    }
}

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/lozenge.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Links

• Figma