Lozenge

Use lozenges to highlight an item's status so it can be recognized quickly

Comparisions

ComponentPurpose / Use Case
LozengeHighlight an item's status
BadgeCounts and tallies
TagVisually label items
DefaultWarningErrorSuccess Super Duper Long Text. Please Wrap at some pointOverride Color
DefaultWarningErrorSucces Super Duper Long Text. Please Wrap at some pointOverride Color
<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>

API