Lozenge

Overview

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

When to use:

  • Use Lozenges to indicate the status of a feature (e.g. “alpha”, "beta", "new").

Implementation

Edit the code below to see your changes live!

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

Props

Prop name
Type
Default
Description
label *string

The text applied to the component.

tooltipContentstring

Defines the message of an optional tooltip.

variantalpha | beta | deprecated | legacy | newnew

Determines which badge to display.

Props ending with * are required

Inherited

Expand

Margin Props

Do's and Don'ts

Do
Use the corresponding variant for the right lifecycle (e.g. new when something is "New" or in "Early access").
Don't
Don't use the Lozenge to convey statuses other than feature lifecycle.