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

Link

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

Overview

• The Link Component is a versatile UI element used to create interactive links within applications.
• It supports customization with icons, tooltips, and multiple styling options.
• It is useful for creating navigation items, action links, or clickable text with indicators.
• The component helps guide users by combining text with visual and interactive cues.

...

• id – Specifies a unique identifier for the component used for programmatic access. For example, "detailsNavigationLink" enables targeted manipulation of this specific link through scripts or automated tests.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting to "details-link" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the link can be highlighted during onboarding or tutorial flows to draw user attention to important navigation options.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Detail Navigation", "de-DE": "Detailnavigation"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click here to view detailed information", "de-DE": "Klicken Sie hier, um detaillierte Informationen anzuzeigen"} provides detailed instructions during guided tours.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11550-242275&t=ftfrOGkPzlG2GaTo-1 Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id2/2-link

Guidelines

Usage

• Use the Link for inline navigation or lightweight actions initiated by clicking text. Provide clear, localized text via titleTranslations and wire the action with ON_LINK_CLICK.
• Indicate the current location or selection by toggling active: true.
• Only disable links that should remain visible but non-interactive using disabled; otherwise hide them using visibilityPolicySetId or displayConditions.

...