Lozenge

A lozenge is a visual indicator used to highlight an item's status for quick recognition.

Appearance

Lozenges are either subtle or bold and use color to indicate meanings that users can learn and recognize across products. Change the lozenge's appearance to bold by setting isStrong.

Default

Use default lozenges for a general status or state, such as: to do, unavailable, minor, not started.

Default lozenge
Default lozenge strong
import Lozenge from '@/components/lozenge';

<Lozenge>Default lozenge</Lozenge>
<Lozenge isStrong>Default lozenge</Lozenge>

Success

Use success lozenges to represent a constructive status or state, such as: available, completed, approved, resolved, added.

Success lozenge
Success lozenge strong
import Lozenge from '@/components/lozenge';

<Lozenge appearance="success">Success lozenge</Lozenge>
<Lozenge appearance="success" isStrong>Success lozenge strong</Lozenge>

Danger

Use danger lozenges to represent a critical or problematic status or state, such as: errors, declined, deleted, failed.

Danger lozenge
Danger lozenge strong
import Lozenge from '@/components/lozenge';

<Lozenge appearance="danger">Danger lozenge</Lozenge>
<Lozenge appearance="danger" isStrong>Danger lozenge strong</Lozenge>

Info

Use info lozenges to represent an in progress or current status or state, such as: in progress, open, modified.

Info lozenge
Info lozenge strong
import Lozenge from '@/components/lozenge';

<Lozenge appearance="info">Info lozenge</Lozenge>
<Lozenge appearance="info" isStrong>Info lozenge strong</Lozenge>

Help

Use help lozenges to represent a new status or state, such as: new, created, help.

Help lozenge
Help lozenge strong
import Lozenge from '@/components/lozenge';

<Lozenge appearance="help">Help lozenge</Lozenge>
<Lozenge appearance="help" isStrong>Help lozenge strong</Lozenge>

Warning

Use warning lozenges to represent a status or state for items that have been changed and require attention, such as: busy, blocked, missing, warning.

Warning lozenge
Warning lozenge strong
import Lozenge from '@/components/lozenge';

<Lozenge appearance="warning">Warning lozenge</Lozenge>
<Lozenge appearance="warning" isStrong>Warning lozenge strong</Lozenge>

Max width

By default, the maximum width of a lozenge is 200px. When the text in the lozenge exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.

Default max width with long text which truncates
Custom max width with long text which truncates
import Lozenge from '@/components/lozenge';

<Lozenge>Default max width with long text which truncates</Lozenge>
<Lozenge maxWidth={100}>Custom max width with long text which truncates</Lozenge>