(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Label

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-45085&t=ftfrOGkPzlG2GaTo-1

Overview

• The Label component displays text, numbers, or dates.
• It supports formatting options such as font size, weight, and padding.
• Icons, tooltips, and ellipsis handling can be added for improved clarity.
• Conditional rules allow the label to show different text based on data thresholds.
• This makes it useful for presenting status information or contextual messages.

...

• id – Specifies a unique identifier for the component used for programmatic access. For example, "orderStatusLabel" enables targeted manipulation of this specific label component.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting to "order-status-label" allows test scripts to reliably locate this component.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the label can be highlighted during onboarding or tutorial flows to explain its meaning to users.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Order Status", "de-DE": "Bestellstatus"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This label shows the current status of the order", "de-DE": "Dieses Label zeigt den aktuellen Status der Bestellung"} provides detailed context during guided tours.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-45085&t=ftfrOGkPzlG2GaTo-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id8/3-label

Guidelines

Usage

• Use for short standalone text, numbers, or dates.
• Add icons to reinforce meaning, but keep clear text for the primary message.

...