A Lozenge displays status or metadata in a compact form. It enhances visual communication with color-coded labels. Used for tagging, categorizing, or indicating status.

• Implement within lists, tables, or cards for context.
• Use concise text to convey the message.
• Apply color schemes to represent different statuses.

• Use in dashboards to indicate item status.
• Apply in lists to tag or categorize items.
• Use when quick status recognition is needed.

• Avoid in dense interfaces where space is limited.
• Do not use if the status is not critical to the user.
• Avoid if it causes visual clutter.

• Text: Central element displaying the label.
• Background: Color-coded to indicate status.
• Border: Optional, for additional emphasis.

• Change color based on status updates.
• Animate transitions for status changes.

• Hover effects to highlight the lozenge.
• Clickable if linked to detailed status information.

• Provide ARIA labels for screen readers.
• Ensure color contrast meets accessibility standards.
• Use text labels for colorblind accessibility.

• Badge: For notifications or counts.
• Tag: For categorization or filtering.