Lozenge

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

#Default

Use a lozenge to show the status of an item.

Default

import { Lozenge } from '@wolf-rayet/react';

<Lozenge>Default</Lozenge>

#Appearance

Use appearance to match the status being communicated.

DraftIn progressCompletedBlockedAt riskNew

import { Lozenge } from '@wolf-rayet/react';

<Lozenge>Draft</Lozenge>
<Lozenge appearance="inprogress">In progress</Lozenge>
<Lozenge appearance="success">Completed</Lozenge>
<Lozenge appearance="removed">Blocked</Lozenge>
<Lozenge appearance="moved">At risk</Lozenge>
<Lozenge appearance="new">New</Lozenge>

#Colors

Use a colour when the status does not map to one of the appearances.

LimeYellowTealMagenta

import { Lozenge } from '@wolf-rayet/react';

<Lozenge appearance="lime">Lime</Lozenge>
<Lozenge appearance="yellow">Yellow</Lozenge>
<Lozenge appearance="teal">Teal</Lozenge>
<Lozenge appearance="magenta">Magenta</Lozenge>