Lozenge

A lozenge shows the status of an item so people can spot it quickly.

#Default

Use a lozenge to show the status of an item.

Default

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

<Lozenge>Default</Lozenge>

#Appearance

Pick the appearance that matches the status.

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>

#Colours

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>