Lozenge

Props

NameTypeDescription
children
string
variant
'blue' | 'green' | 'orange' | 'purple' | 'red' | 'grey'
className
string

Lozenges

Lozenges are used to provide users with a quick way to check the status of a resource
Declined
Awaiting approval
Pending
Complete
In progress
New
<span> <Lozenge marginRight={4} variant="red" > Declined </Lozenge> <Lozenge marginRight={4} variant="purple" > Awaiting approval </Lozenge> <Lozenge marginRight={4} variant="orange" > Pending </Lozenge> <Lozenge marginRight={4} variant="green" > Complete </Lozenge> <Lozenge marginRight={4} variant="blue" > In progress </Lozenge> <Lozenge marginRight={4} variant="grey" > New </Lozenge> </span>

Truncation

Lozenges will be truncated when they reach more than 180px
This is a really long lozenge that will be truncated
<Lozenge> This is a really long lozenge that will be truncated </Lozenge>