Lozenge

Overview

Lozenges are labels that indicate the development lifecycle status of a feature.

When to use:

Use Lozenges to indicate the lifecycle status of a feature (e.g.alpha, beta, early-access, new, deprecated, legacy).

Edit the code below to see your changes live!

<Lozenge label="New" variant="new" />

Prop name	Type	Default	Description
`label` *	`string`		Text rendered inside the lozenge.
`variant`	`alpha` \| `beta` \| `deprecated` \| `early-access` \| `legacy` \| `new`	`new`	Lifecycle status the lozenge represents.
`tooltipContent`	`string`		Adds an info icon and shows this message in a tooltip on hover/focus (tooltip mode).
`onClick`	`() => void`		Click handler for popover mode. Provide together with `isOpen` to use the lozenge as a popover trigger.
`isOpen`	`boolean`		Controls the open state in popover mode (sets `aria-expanded` and caret visual state).

Props ending with * are required

Margin Props

Do
Use the variant that matches the lifecycle: `alpha`/`beta` for pre-GA testing states. `early-access` for limited/opt-in availability. `new` for generally available, recently released features. `deprecated`/`legacy` for sunsetting or superseded features.
When using as a popover trigger, keep the popover content short and action-oriented (e.g., links to docs or release notes).

Don't
Don't use a Lozenge for statuses unrelated to feature lifecycle (e.g., “enabled/disabled”, success/error).
Don't use tooltip and popover modes together; pick one interaction pattern.