Use lozenges to highlight an item's status so it can be recognized quickly
Component | Purpose / Use Case |
---|---|
Lozenge | Highlight an item's status |
Badge | Counts and tallies |
Tag | Visually label items |
<Grid justifyContent="center">
<SpacedGroup direction="vertical">
<Lozenge variant="info" bold>
Default
<Lozenge variant="warning" bold>
Warning
</Lozenge>
<Lozenge variant="error" bold>
Error
</Lozenge>
<Lozenge variant="success" bold>
Success Super Duper Long Text. Please Wrap at some point
</Lozenge>
<Lozenge bold variant="info" color={palette.plum}>
Override Color
</Lozenge>
</SpacedGroup>
<SpacedGroup direction="vertical">
<Lozenge variant="info">Default</Lozenge>
<Lozenge variant="warning">Warning</Lozenge>
<Lozenge variant="error">Error</Lozenge>
<Lozenge variant="success">
Succes Super Duper Long Text. Please Wrap at some point
</Lozenge>
<Lozenge variant="info" color={palette.plum}>
Override Color
</Lozenge>
</SpacedGroup>
</Grid>
</Playground>