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

Link

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.

Specs

Tokens

Structure

• The Link component consists of a clickable text element with an optional tooltip that can be localized, positioned, and delayed.

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Navigation Link" allows for easy identification of this link's purpose in the component structure, making it easier for developers to locate and work with this specific link.

(Configured in Visual Properties)

• showTooltip – Controls whether a tooltip is displayed when hovering over the link. When enabled, provides additional information about the link's purpose or destination.
• tooltipTextTranslations – Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "Navigate to product details", "de-DE": "Zu den Produktdetails navigieren"} provides context-specific information when users hover over the link.
• tooltipPlacement – Determines the position of the tooltip relative to the link. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the link, which is useful when links are arranged horizontally.
• tooltipDelay – Sets the delay in milliseconds before the tooltip appears when hovering over the link. For example, setting to "500" causes the tooltip to appear after half a second, preventing tooltips from appearing too quickly during casual mouse movements.

(Configured in Visibility Properties)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the link based on complex rules involving form values, user roles, or application state. For example, the link might only be shown when certain data is available or when the user is in a specific workflow step.

Styling

(Configured in Visual Properties)

• titleTranslations – Sets the text displayed on the link with support for multiple languages. For example, {"en-US": "View Details", "de-DE": "Details anzeigen"} ensures proper localization of the link text for different language settings.
• leftIcon – Specifies an icon to display to the left of the link text. For example, setting to "document" would display a document icon before the text, making the purpose of the link more immediately clear to users.
• rightIcon – Specifies an icon to display to the right of the link text. For example, setting to "external-link" would indicate that the link navigates to an external website or opens in a new window.
• paddingClass – Configures spacing around the link using CSS classes. For example, "p-2" adds light padding on all sides of the link, improving its visual spacing within its container.

Actions & Variants

(Configured in Event Actions Properties)

• events – Configures the events that the component can trigger and respond to:
• ON_LINK_CLICK – Triggered when the link is clicked. Can be used to navigate to URLs, open dashboards, or perform other actions based on user interaction.
• ON_INIT – Triggered when the link component is initialized. Can be used to perform setup operations when the link first appears.
• ON_DESTROY – Triggered when the link component is removed from the DOM. Useful for cleanup operations and releasing resources.

(Configured in Visual Properties)

• disabled – Controls whether the link is clickable or not. When set to true, the link appears grayed out and does not respond to clicks, which is useful for conditionally disabling navigation options based on user permissions or application state.
• active – Determines whether the link appears in an active/selected state. When set to true, the link is visually highlighted to indicate it represents the current page or selection, providing users with visual feedback about their current location.

Authorization

(Configured in Authorization Properties)

• authorizationDisable – Specifies a policy set that determines whether the link should be enabled or disabled based on user permissions. For example, setting to "editingPermissions" would disable the link for users who don't have editing permissions, while still showing it in the interface.
• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "adminMenuPolicy" would make the link visible only to users with administrator privileges.

Tests

(Configured in Testing Hooks Properties)

• 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.

Sizing & Layout

• Adjust clickable comfort and spacing with paddingClass.
• Use leftIcon / rightIcon to add meaning while keeping the primary label in titleTranslations.

States & Feedback

• Supported visual states are default (enabled), active, and disabled.
• Provide supplemental hover context via tooltips rather than changing the label on hover using showTooltip and tooltipTextTranslations.

Tooltips

• Keep tooltips short, localized, and optional with showTooltip and tooltipTextTranslations.
• Position tooltips using tooltipPlacement; add a modest tooltipDelay to reduce accidental reveals.
• Do not place critical instructions only in the tooltip; ensure core meaning is in titleTranslations.

Data-Driven / Conditional Behavior

• Show/hide the link with displayConditions; keep conditions mutually exclusive to prevent flicker.
• Gate clickability without hiding by binding to authorizationDisable.

Visibility & Authorization

• Hide links entirely for unauthorized audiences via visibilityPolicySetId.
• Combine visibilityPolicySetId (who sees) with authorizationDisable (who can click) for precise control.

Content & Localization

• Write action-oriented, self-sufficient text (avoid “Click here”) and localize it with titleTranslations.
• For guided onboarding, opt into hotspots with enableAsHotspot, and provide guidedTourHotSpotTitle and guidedTourHotSpotDescription.

Dos & Don’ts

Accessibility

• Convey state without color-only meaning by using active / disabled and optional icons via leftIcon / rightIcon.
• When indicating special behaviors (e.g., external destinations), prefer adding an icon (rightIcon) in addition to the descriptive text in titleTranslations.
• Provide stable hooks for automated accessibility checks with dataTestId and id.
• Localize guided-tour content so assistive tech announces accurate context using guidedTourHotSpotTitle and guidedTourHotSpotDescription.
• If you enable tooltips, ensure they are supplemental and short; rely on the visible label in titleTranslations for the essential meaning.