ISA-Frontend/libs/ui/label/README.md

@isa/ui/label

Label components for displaying tags, categories, and priority indicators.

Installation

import { LabelComponent, PrioLabelComponent } from '@isa/ui/label';

Components

LabelComponent

A badge-style label for tags, filters, and reward indicators.

Figma: ISA Design System - Label

Usage

<!-- Basic label -->
<ui-label>Prämie</ui-label>

<!-- Active state (hover/pressed) -->
<ui-label [active]="true">Selected</ui-label>

API

Input	Type	Default	Description
active	boolean	false	Active state (adds background color)

PrioLabelComponent

A priority indicator label with two priority levels.

Figma: ISA Design System - Prio Label

Usage

<!-- Priority 1 (high) - default -->
<ui-prio-label [priority]="1">Pflicht</ui-prio-label>

<!-- Priority 2 (low) -->
<ui-prio-label [priority]="2">Prio 2</ui-prio-label>

API

Input	Type	Default	Description
priority	1 | 2	1	Priority level (1 = high, 2 = low )

CSS Classes

LabelComponent

• .ui-label - Base class
• .ui-label--active - Active state

PrioLabelComponent

• .ui-prio-label - Base class
• .ui-prio-label--1 - Priority 1 (dark background)
• .ui-prio-label--2 - Priority 2 (light background)

Accessibility

Both components include:

• role="status" - Indicates status information
• E2E testing attributes (data-what, data-which)

E2E Testing

// Select all labels
page.locator('[data-what="label"]');

// Select all priority labels
page.locator('[data-what="prio-label"]');

// Select specific priority
page.locator('[data-what="prio-label"][data-which="priority-1"]');