Lozenge

A lozenge is a prominent, compact label used to communicate a meaningful attribute that affects how people understand, prioritize or act on an object.

Generally available

The new lozenge is stable and ready for adoption. Visual updates are currently behind the platform-dst-lozenge-tag-badge-visual-uplifts feature flag.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/lozenge`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/lozenge, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`appearance`
Description	The appearance of the lozenge. Supports legacy semantic appearances and new semantic colors. Accent appearance values.
Type	`"default" \| "inprogress" \| "moved" \| "new" \| "removed" \| "success" \| "warning" \| "danger" \| "information" \| "neutral" \| "discovery" \| AccentColor`

`children`
Description	Elements to be rendered inside the lozenge. This should ideally be just a word or two.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`iconBefore`
Description	Icon to display before the text content. Should be an ADS icon component.
Type	`ComponentClass<Omit<NewIconProps, "spacing">, any> \| FunctionComponent<Omit<NewIconProps, "spacing">>`

`isBold`
Deprecated
Description	Deprecated. Will be removed in a future major release. Lozenge will be bold by default. For labels and categorization, use Tag instead.
Type	`boolean`

`maxWidth`
Description	max-width of lozenge container. Default to 200px.
Type	`string \| number`

`spacing`
Description	Controls the overall spacing (padding + height) of the lozenge. `default` matches the current visual appearance. `spacious` increases padding and sets the lozenge height to 32px.
Type	`"default" \| "spacious"`

`style`
Deprecated
Description	Style customization to apply to the lozenge. Only `backgroundColor` and `color` are supported. This prop is deprecated and will be removed in a future version.
Type	`{ color?: Color; backgroundColor?: BackgroundColor; }`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
Type	`string`

`trailingMetric`
Description	Numeric metric displayed at the end of the lozenge as a badge. Trailing metric is not supported for accent lozenges.
Type	`string`

`trailingMetricAppearance`
Description	Overrides the appearance of the trailing metric badge. If not specified, the trailing metric badge inherits the lozenge appearance. This prop is not supported for accent lozenges. Trailing metric appearance is not supported for accent lozenges.
Type	`"default" \| "inprogress" \| "moved" \| "new" \| "removed" \| "success" \| "warning" \| "danger" \| "information" \| "neutral" \| "discovery" \| "inverse"`

Was this page helpful?

We use this feedback to improve our documentation.

Lozenge

Generally available

Installation

Props

`appearance`

`children`

`iconBefore`

`isBold`

`maxWidth`

`spacing`

`style`

`testId`

`trailingMetric`

`trailingMetricAppearance`

Was this page helpful?