Lozenge

Usage

A Lozenge is a visual indicator used to highlight an item's status for quick recognition or to give an additional, short information such as validation status, price, discount or time. They use colors to indicate meanings that users can learn and recognize across products of Bauhaus Design System.

Distinction between Chips and Lozenge

• Lozenge displays the status of the item, whereas Chips get and send data to the backend.
• Chips are user-interactable while Lozenge are not.
• Both Chips and Status Lozenge are dynamic and can change status.

Types

Lozenge has three distinct types: Status, Info and Generic.

Status Lozenge - is used to inform user about the status of an entity, for example of the product, if it has a pending warning, error, etc. Status Lozenge can have 3 interchangeable statuses: Error, Warning and Success. Use Success Status Lozenges to represent a constructive status or state, such as: available, completed, approved, resolved, added or similar. Use Error Status Lozenges to represent a critical or problematic status or state that needs to be immediately resolved or requires user attention, such as: errors, declined, deleted, failed or similar. Use Warning Status Lozenge for items that are in progress or that are open, modified, pending, low priority error, may lead to error if left unnoticed or similar.

Info Lozenge - is used for situations where there is a need to convey a specific information, property or status of an object that is neutral (that could be in progress or similar).

Generic Lozenge- is used for any other situations that are not necessarily status informants but can require a tag or stamp, such as price tag, date tag, etc. to be distinctive in UI.

Anatomy and Behavior

1. Container - is where the state of the Lozenge is also communicated with different background colors.

2. Leading and Trailing Icons - graphically augment the message that Lozenge is trying to convey. Icons can be used in some cases that require faster recognition by user. These icons are optional and both icons can not be used at the same time. As the Design System will evolve we may only keep one or assign different usages to both icons to distinguish between them. Status Lozenges have their pre-defined icons that help user communicate status with widely accepted graphical elements such as check, hazard and stop signs for Success, Warning and Error statuses respectively.

3. Text - conveys the message of the Lozenge with a short word or phrase. In Status Lozenges some commonly used words will be: DONE, SUCCESS, COMPLETED, RESOLVED, WARNING, PENDING, ERROR, MISSING, FAILED, REMOVED and similar terms respectively for each statuses. Text is written in ALL CAPS. In certain situations like Multiselect Component, when the Lozenge component is in a bounding container and there is not enough horizontal space to fit the Lozenge text, it may get truncated.

4. Behavior - Lozenges are not user-interactable therefore they do not have any user triggered behavior. Only Status Lozenges can change their status if the entity they are assigned to is updated. For example, if an Error Status Lozenge was representing an error in the entity that needs to be resolved, it will change its status to Success Status Lozenge once this issue is resolved.

States

Since Lozenges are not clickable they do not have states (hover, active, etc.).

Gaps and Sizes

• Container Width: Hug contents, min. L, max. width is parent's width. Container grows in width as the text inside grows.
• Container height: L
• Padding top and down: 2XS
• Padding right and left: XS
• Gap between Text and the icons: XS
• Border radius: 2XS

Lozenge

Lozenge

Lozenge

Tokens

SCSS Variable

Value

$lozenge-color

--color-grey-54

$lozenge-bgColor

--color-grey-90

$lozenge-status-bgColor--success

--color-green-95

$lozenge-status-color--success

--color-green-50

$lozenge-status-bgColor--warning

--color-ochre-95

$lozenge-status-color--warning

--color-ochre-70

$lozenge-status-bgColor--error

--color-red-95

$lozenge-status-color--error

--color-red-50

$lozenge-info-bgColor

--color-blue-95

$lozenge-info-color

--color-blue-45

$lozenge-border-width

0.5px

$lozenge-border-radius

3px

$lozenge-padding-vertical

--gutter-2xs

$lozenge-padding-horizontal

--gutter-xs

$lozenge-gap

--gutter-2xs

$button-text: %caption

Properties

export type LozengeProps =
  & ElementProps
  & {
    category: LozengeCategory;
    icon?: IconName;
    iconTrailing?: boolean;
    statusState?: LozengeStatus;
    text: string;
    unlimitWordCount?: boolean;
  };

Configurations

Lozenge
Categories	State	No Icon	Icon Leading	Icon Trailing
Generic	-	Lozenge	Lozenge	Lozenge
Info	-	Lozenge	Lozenge	Lozenge
Status	success	Lozenge	Lozenge	Lozenge
	warning	Lozenge	Lozenge	Lozenge
	error	Lozenge	Lozenge	Lozenge

Lozenge Sizes
Size	No Icon	Icon Leading	Icon Trailing
small	Lozenge	Lozenge	Lozenge
medium	Lozenge	Lozenge	Lozenge
big	Lozenge	Lozenge	Lozenge