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

Guidelines

• Links should be easily distinguishable from regular text by using consistent styling such as color, underline, or icon indicators.
• Avoid using only color to indicate link state; combine it with another visual cue (e.g., underline or bold).
• Provide clear and descriptive link text so users understand the purpose without needing additional context.
• Use icons alongside text only when they add clarity to the link’s meaning or destination.
• Ensure tooltips and link text do not duplicate each other; tooltips should provide additional context.

Accessibility

[NO DATA AVAILABLE]