Lozenge

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

Appearance

Lozenges are either subtle or bold and use color to indicate meanings that users can learn and recognize across products. Change the lozenge's appearance to bold by setting isBold.

Default

Use default lozenges for a general status or state, such as: to do, unavailable, minor, not started.

DEFAULT

DEFAULT BOLD


          import React, { useState } from "react";
          import { Lozenges } from '@neoKit/lozenges';
        
          const DefaultExample = () => {
            return (
                <>
                <div>
                  <Lozenges>Default</Lozenges>
                </div>
                <div>
                  <Lozenges isBold>Default bold</Lozenges>
                </div>
              </>
            );
          };
          export default DefaultExample;

Success

Use success lozenges to represent a constructive status or state, such as: available, completed, approved, resolved, added.

Success

Success bold


import React, { useState } from "react";
import { Lozenges } from '@neoKit/lozenges';

const SuccessLozengestExample = () => {
  return (
      <>
      <div>
      <Lozenges appearance="success">Success</Lozenges>
    </div>
    <div>
      <Lozenges appearance="success" isBold>
        Success bold
      </Lozenges>
    </div>
    </>
  );
};
export default  SuccessLozengestExample;

Removed

Use removed lozenges to represent a critical or problematic status or state, such as: errors, declined, deleted, failed.

Removed

Removed bold


  import React, { useState } from "react";
  import { Lozenges } from '@neoKit/lozenges';
  
  const RemoveLozengestExample = () => {
    return (
        <>
        <div>
        <Lozenges appearance='removed'>Removed</Lozenges>
        </div>
        <div>
        <Lozenges appearance='removed' isBold>
        Removed bold
        </Lozenges>
        </div>
      </>
    );
    
  };
  export default  RemoveLozengestExample;

In progress

Use inprogress lozenges to represent an in progress or current status or state, such as: in progress, open, modified.

In progress

In progress bold


  import React, { useState } from "react";
  import { Lozenges } from '@neoKit/lozenges';
  
  const InprogressLozengestExample = () => {
    return (
        <>
        <div>
        <Lozenges appearance="inprogress">In progress</Lozenges>
      </div>
      <div>
        <Lozenges appearance="inprogress" isBold>
    In progress bold
        </Lozenges>
      </div>
      </>
    );
    
  };
  export default  InprogressLozengestExample;

New

Use new lozenges to represent a new status or state, such as: new, created, help.

New

New bold


  import React, { useState } from "react";
  import { Lozenges } from '@neoKit/lozenges';
  
  const NewLozengestExample = () => {
    return (
        <>
        <div>
            <Lozenges appearance='new'>New</Lozenges>
          </div>
          <div>
            <Lozenges appearance='new' isBold>
              New bold
            </Lozenges>
          </div>
      </>
    );
    
  };
  export default  NewLozengestExample;

Moved

Use moved lozenges to represent a status or state for items that have been changed and require attention, such as: busy, blocked, missing, warning.

Moved

Moved bold


  import React, { useState } from "react";
  import { Lozenges } from '@neoKit/lozenges';
  
  const MovedLozengestExample = () => {
    return (
        <>
        <div>
        <Lozenges appearance="moved">Moved</Lozenges>
      </div>
      <div>
        <Lozenges appearance="moved" isBold>
    Moved bold
        </Lozenges>
      </div>
      </>
    );
    
  };
  export default  MovedLozengestExample;

Max width

By default, the maximum width of a lozenge is 200px. When the text in the lozenge exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized. Avoid truncation wherever possible by using shorter text in lozenges. The truncated text is not focusable or accessible.

default max width with long text which truncates

custom max width with long text which truncates


  import React, { useState } from "react";
  import { Lozenges } from '@neoKit/lozenges';
  
  const MaxLengthLozengestExample = () => {
    return (
        <>
        <div>
  <Lozenges appearance='success'>
    default max width with long text which truncates
  </Lozenges>
</div>
<div>
  <Lozenges appearance='success' maxWidth={100}>
    custom max width with long text which truncates
  </Lozenges>
</div>
      </>
    );
    
  };
  export default  MaxLengthLozengestExample;