Skip to main content

Link Component

1. Introduction​

The Link component is a fundamental UI element that allows users to navigate to external or internal resources by clicking on a hyperlink. It is highly customizable, supporting various configurations such as target behavior, tooltips, and styling. This component is essential for creating interactive and navigable applications.

Purpose and Use Cases​

  • Purpose: The Link component is used to redirect users to a specified URL or resource.
  • Primary Use Cases:
    • Navigating to external websites or internal pages.
    • Linking to downloadable resources or documents.
    • Providing quick access to additional information or related content.

Benefits​

  • Customizable: Fully configurable properties and styles to match the application's design.
  • Interactive: Supports tooltips and target behavior for enhanced user experience.
  • Improved Navigation: Simplifies user journeys by providing direct access to resources.
  • Cross-Platform Compatibility: Works seamlessly on desktop, tablet, and mobile devices.

2. Properties​

The Link component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Text​

  • Description: The display text for the link.
  • Purpose: Provides a clickable label for the link.
  • Required/Optional: Required

URL​

  • Description: The destination URL for the link.
  • Purpose: Specifies the resource or page the link redirects to.
  • Required/Optional: Required

Target​

  • Description: Specifies how the link opens.
  • Purpose: Determines whether the link opens in a new window or the current tab.
  • Options:
    • New Window: Opens the link in a new browser tab or window (default).
    • Current Tab/Window: Opens the link in the same tab or window.
  • Required/Optional: Optional

Tooltip​

  • Description: Text displayed when the user hovers over the link.
  • Purpose: Provides additional context or guidance for the link.
  • Required/Optional: Optional

Enabled​

  • Description: Determines whether the link is active or disabled.
  • Purpose: Controls the availability of the link to users.
  • Default: ON
  • Required/Optional: Optional

3. Style​

The Link component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the link's dimensions.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the link (default: 0).
  • Fixed Position: Locks the link's position on the screen (default: OFF).
  • Hidden: Hides the link from view (default: OFF).

Border​

  • Reset: Resets border settings to default.
  • Normal:
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).
  • On Hover:
    • Same properties as "Normal" but applied when the link is hovered.

Padding​

  • Reset: Resets padding settings to default.
  • Normal:
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.
  • On Hover:
    • Same properties as "Normal" but applied when the link is hovered.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the link is hovered.

Label Font​

  • Reset: Resets label font settings to default.
  • Options:
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).
    • Stretch: Normal (default), semi-condensed, condensed, extra-condensed, ultra-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
    • Variant: Normal, small caps, initial, inherit.
    • Caps Variant: Normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial, inherit.
    • Text Decoration:
      • Line: None, underline, overline, line-through, blink, initial, inherit.
      • Style: Solid, double, dotted, dashed, wavy, initial, inherit.
      • Thickness: Number expressed in em, px, or rem units (default: 1px).
      • Color: Hexadecimal color code with a color picker (default: none).

Shadow​

  • Reset: Resets shadow settings to default.
  • Normal:
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).
  • On Hover:
    • Same properties as "Normal" but applied when the link is hovered.

Cursor​

  • Reset: Resets cursor settings to default.
  • Options: Auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, wait, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, neswe-resize, nesw-resize, zoom-in, zoom-out.

4. Best Practices for UI/UX​

When and Why to Use​

  • Use the Link component to provide navigation to external or internal resources.
  • Ideal for creating interactive and user-friendly interfaces.
  • Use tooltips to provide additional context for links that may not be self-explanatory.

Effective Scenarios​

  • Desktop: Use for navigation menus, resource links, or call-to-action buttons.
  • Tablet/Smartphone: Use for responsive designs with optimized link sizes.

Tips for Optimal Use​

  • Ensure links are clearly labeled to avoid confusion.
  • Use consistent styling across the application for a cohesive design.
  • Avoid overloading the interface with too many links, as it may distract users.

5. Security Considerations​

Potential Risks​

  • External URLs: Ensure that external links point to trustworthy and secure sources.
  • Tooltip Content: Sanitize dynamic tooltip content to prevent XSS (Cross-Site Scripting) attacks.

Best Practices​

  • Use HTTPS for external links to ensure secure communication.
  • Validate all user inputs before processing or storing them.
  • Escape any dynamic content displayed in tooltips to prevent XSS attacks.