Learn more about our mission.
``` --- ## Props API | Prop | Type | Default | Description | |------|------|---------|-------------| | `href` | `string` | **required** | The URL the link points to | | `variant` | `'internal' \| 'external' \| 'inline'` | `'internal'` | Link variant determining icon and behavior | | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the link text and icon | | `icon` | `'arrow' \| 'external' \| null` | `null` | Override icon type (auto-determined by variant if `null`) | | `disabled` | `boolean` | `false` | Disables the link, preventing navigation | | `children` | `React.ReactNode` | **required** | Link text content | | `className` | `string` | - | Additional CSS classes | | `...rest` | `AnchorHTMLAttributes` | - | All standard anchor attributes (`target`, `rel`, etc.) | --- ## Variants ### Internal (Default) For navigation within the same website. Displays a horizontal arrow (→) that animates to a chevron (>) on hover. ```tsx Internal Documentation ``` ### External For links to external websites. Displays a diagonal arrow with corner bracket (↗) that animates on hover. Always use with `target="_blank"` and `rel="noopener noreferrer"` for security. ```tsx GitHub Repository ``` ### Inline For links embedded within body text. No icon is displayed, making the link flow naturally within paragraphs. ```tsxThe XRP Ledger is a decentralized blockchain. You can{" "} read the documentation{" "} to learn more.
``` --- ## Sizes | Size | Font Size | Line Height | Icon Gap | |------|-----------|-------------|----------| | `small` | 14px | 1.5 | 6px | | `medium` | 16px | 1.5 | 8px | | `large` | 20px | 1.5 | 10px | ```tsx Small Link Medium Link Large Link ``` --- ## Color States The Link component automatically handles color states based on the current theme. Colors are applied via CSS and follow the Figma design specifications. ### Light Mode | State | Color Token | Hex Value | Additional Styles | |-------|-------------|-----------|-------------------| | **Enabled** | Green 400 | `#0DAA3E` | No underline | | **Hover** | Green 500 | `#078139` | Underline, arrow animates | | **Focus** | Green 500 | `#078139` | Underline, black outline | | **Active** | Green 400 | `#0DAA3E` | Underline | | **Visited** | Lilac 400 | `#7649E3` | No underline | | **Disabled** | Gray 400 | `#A2A2A4` | No underline, no pointer | ### Dark Mode | State | Color Token | Hex Value | Additional Styles | |-------|-------------|-----------|-------------------| | **Enabled** | Green 300 | `#21E46B` | No underline | | **Hover** | Green 200 | `#70EE97` | Underline, arrow animates | | **Focus** | Green 200 | `#70EE97` | Underline, white outline | | **Active** | Green 300 | `#21E46B` | Underline | | **Visited** | Lilac 300 | `#C0A7FF` | No underline | | **Disabled** | Gray 500 | `#838386` | No underline, no pointer | ### Focus Outline - **Light Mode**: 2px solid black (`#000000`) - **Dark Mode**: 2px solid white (`#FFFFFF`) --- ## Icon Animations Both internal and external arrow icons feature a smooth animation on hover/focus: - **Animation Duration**: 150ms - **Timing Function**: `cubic-bezier(0.98, 0.12, 0.12, 0.98)` ### Internal Arrow Animation The horizontal line of the arrow (→) shrinks from left to right, revealing a chevron shape (>). ### External Arrow Animation The diagonal line of the external arrow (↗) scales down toward the top-right corner, leaving just the corner bracket. ### Disabled State When disabled, the animation is disabled and the icon opacity is reduced to 50%. --- ## Accessibility The Link component follows accessibility best practices: ### Keyboard Navigation - Focusable via Tab key - Activatable via Enter key - Clear focus indicator with high-contrast outline ### ARIA Attributes - `aria-disabled="true"` is applied when the link is disabled - Icons are marked with `aria-hidden="true"` to prevent screen reader announcement ### Best Practices 1. **Use descriptive link text** - Avoid "click here" or "read more" 2. **External links** - Consider adding "(opens in new tab)" for screen readers 3. **Disabled state** - Provide context for why the link is disabled ```tsx // Good - Descriptive link text View pricing plans // Bad - Non-descriptive Click here // External with screen reader context GitHub Repository ``` --- ## Best Practices ### Do's 1. **Use appropriate variants** ```tsx // Internal navigation About Us // External sites GitHub // Within paragraphsLearn about XRP today.
``` 2. **Match size to context** ```tsx // Navigation/CTA - use large Get Started // Body content - use medium Documentation // Footnotes/captions - use small Terms of Service ``` 3. **Always use security attributes for external links** ```tsx External Site ``` ### Don'ts 1. **Don't use disabled for navigation prevention** - Use proper routing instead ```tsx // Bad - Using disabled for auth gate Dashboard // Good - Handle in onClick or router Dashboard ``` 2. **Don't mix variants inappropriately** ```tsx // Bad - External link with internal variant External Site // Good External Site ``` 3. **Don't use inline variant for standalone links** ```tsx // Bad - Standalone inline link Documentation // Good - Use internal for standalone Documentation ``` --- ## Examples ### Navigation Menu ```tsx ``` ### Call-to-Action Section ```tsxThe XRP Ledger (XRPL) is a decentralized, public blockchain led by a{" "} global community{" "} of businesses and developers. It supports a wide variety of{" "} use cases{" "} including payments, tokenization, and DeFi.
To learn more, check out the{" "} official documentation{" "} or visit the{" "} GitHub repository .