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

Appearance

Semantic colors

Lozenges use semantic colors to indicate meanings that people can learn and recognize across apps.

Neutral

Use neutral lozenges for general status without specific semantic meaning. For example: "default", "standard", "inactive", or "draft".

DraftInactive

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Inline } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Inline space="space.100">
		<Lozenge appearance="neutral">Draft</Lozenge>
		<Lozenge appearance="neutral">Inactive</Lozenge>
	</Inline>
);

Success

Use success lozenges to represent a constructive or positive status. For example: "available", "completed", "approved", "resolved", or "added".

CompletedOn trackApproved

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Inline } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Inline space="space.100">
		<Lozenge appearance="success">Completed</Lozenge>
		<Lozenge appearance="success">On track</Lozenge>
		<Lozenge appearance="success">Approved</Lozenge>
	</Inline>
);

Warning

Use warning lozenges to represent a cautionary status that requires attention. For example: "pending", "needs review", "at risk", or "approaching deadline".

At riskNeeds review

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Inline } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Inline space="space.100">
		<Lozenge appearance="warning">At risk</Lozenge>
		<Lozenge appearance="warning">Needs review</Lozenge>
	</Inline>
);

Danger

Use danger lozenges to represent a critical or problematic status. For example: "error", "declined", "failed", "blocked", or "urgent".

BlockedFailedOverdue

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Inline } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Inline space="space.100">
		<Lozenge appearance="danger">Blocked</Lozenge>
		<Lozenge appearance="danger">Failed</Lozenge>
		<Lozenge appearance="danger">Overdue</Lozenge>
	</Inline>
);

Information

Use information lozenges to represent informational or in-progress status. For example: "in progress", "modified", "reviewing", or "open".

In progressModifiedReviewing

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Inline } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Inline space="space.100">
		<Lozenge appearance="information">In progress</Lozenge>
		<Lozenge appearance="information">Modified</Lozenge>
		<Lozenge appearance="information">Reviewing</Lozenge>
	</Inline>
);

Discovery

Use discovery lozenges to represent new features, updates, or promotional labels. For example: "new", "beta", "premium", or "preview".

NewBetaPremium

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Inline } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Inline space="space.100">
		<Lozenge appearance="discovery">New</Lozenge>
		<Lozenge appearance="discovery">Beta</Lozenge>
		<Lozenge appearance="discovery">Premium</Lozenge>
	</Inline>
);

Accent colors

In addition to semantic colors, lozenges support accent colors. In most cases, accent colors are used for user-generated content, where customers can choose a color and the text label.

RedOrangeYellowLimeGreenTealBluePurpleMagentaGray

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Inline } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Inline space="space.100">
		<Lozenge appearance="accent-red">Red</Lozenge>
		<Lozenge appearance="accent-orange">Orange</Lozenge>
		<Lozenge appearance="accent-yellow">Yellow</Lozenge>
		<Lozenge appearance="accent-lime">Lime</Lozenge>
		<Lozenge appearance="accent-green">Green</Lozenge>
		<Lozenge appearance="accent-teal">Teal</Lozenge>
		<Lozenge appearance="accent-blue">Blue</Lozenge>
		<Lozenge appearance="accent-purple">Purple</Lozenge>
		<Lozenge appearance="accent-magenta">Magenta</Lozenge>
		<Lozenge appearance="accent-gray">Gray</Lozenge>
	</Inline>
);

With icon

Lozenges can include an icon before the text to provide additional visual context. Use the iconBefore prop with an icon component.

With icon

import React from 'react';

import ImageIcon from '@atlaskit/icon/core/image';
import Lozenge from '@atlaskit/lozenge/lozenge';

export default (): React.JSX.Element => (
	<Lozenge appearance="success" iconBefore={ImageIcon}>
		With icon
	</Lozenge>
);

Trailing metric

Use trailingMetric to display a numeric metric as a badge inside the lozenge.

Completed0.8

Off track0.3

import React from 'react';

import ArrowDownRightIcon from '@atlaskit/icon/core/arrow-down-right';
import Lozenge from '@atlaskit/lozenge/lozenge';
import { Stack } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Stack space="space.100">
		<p>
			<Lozenge appearance="success" trailingMetric="0.8">
				Completed
			</Lozenge>
		</p>
		<p>
			<Lozenge
				appearance="danger"
				spacing="spacious"
				trailingMetric="0.3"
				iconBefore={ArrowDownRightIcon}
			>
				Off track
			</Lozenge>
		</p>
	</Stack>
);

Spacing

Use spacing="spacious" to increase padding and lozenge height (32px).

Default

Spacious

Spacious with icon

import React from 'react';

import ImageIcon from '@atlaskit/icon/core/image';
import Lozenge from '@atlaskit/lozenge/lozenge';
import { Stack } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Stack>
		<p>
			<Lozenge appearance="information">Default</Lozenge>
		</p>
		<p>
			<Lozenge appearance="information" spacing="spacious">
				Spacious
			</Lozenge>
		</p>
		<p>
			<Lozenge appearance="information" spacing="spacious" iconBefore={ImageIcon}>
				Spacious with icon
			</Lozenge>
		</p>
	</Stack>
);

Max width

When the text in the lozenge exceeds the maximum width, it will be truncated with an ellipsis. By default, the maximum width of a lozenge is 200px. You can use the maxWidth prop to customize the width of the lozenge.

Avoid truncation wherever possible by using shorter text in lozenges. The truncated text is not focusable or accessible.

default max width with long text which truncates

custom max width with long text which truncates

import React from 'react';

import Lozenge from '@atlaskit/lozenge/lozenge';
import { Stack } from '@atlaskit/primitives/compiled';

export default (): React.JSX.Element => (
	<Stack>
		<p>
			<Lozenge appearance="success">default max width with long text which truncates</Lozenge>
		</p>
		<p>
			<Lozenge appearance="success" maxWidth={100}>
				custom max width with long text which truncates
			</Lozenge>
		</p>
	</Stack>
);

Was this page helpful?

We use this feedback to improve our documentation.