Lozenge

Atom

A visual indicator used to highlight an item's status for quick recognition or to give 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. Unlike Chips, Lozenges do not send data to the backend and are no user-interactable.

Playground

Properties

export type LozengeCategory = "status" | "info" | "generic" | "brand";
export type LozengeStatus = "error" | "warning" | "success";

export interface LozengeProps extends ElementProps {
  category: LozengeCategory;
  icon?: IconName;
  iconTrailing?: boolean;
  statusState?: LozengeStatus;
  text?: string;
  unlimitWordCount?: boolean;
}

Anatomy

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

2. Icon (leading or trailing) - 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. 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. Text is written in ALL CAPS. Text cannot wrap down to the next line. Maximum numbers of words permitted is two. In certain situations like in 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.

Variants

Types

Status Lozenge - is used to inform user about the status of an entity. It does not have a trailing icon.

Info Lozenge - is used to convey specific information of an object.

Brand Lozenge - used to indicate brand identity or ownership. It serves as a distinctive tag for branded elements, not related to status or progress.

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.

Text

Show or hide text.

States

The Info type Lozenge has 3 states to show the status of a process: Error, Warning and Success. Each state has an assigned leading icon that should not be customized.

Info, Brand and Generic types do not have different states.

Developer Notes

NOTE

Only Icon to use the only icon, the text needs to be an empty string. There's a default icon set to be 'info' in case there's no icon defined, this can be customized by setting the icon prop to any of the icons of the IconList.

NOTE

Status (category: 'status') has predetermined icons, don't need to be specified by props and cannot be overwritten.

Usage Example

To make a component with category: 'generic':

<script lang="ts" setup>
import { Lozenge } from '@pohlcon/design-system';

const props = reactive({
  category: 'generic' as LozengeCategory,
  icon: 'info' as IconName, 
  text: 'Lozenge',
  iconTrailing: false,
  unlimitWordCount: false,
});

</script>

<template>
   <Lozenge v-bind="props"/>
</template>

Configurations

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