{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"BdsLink Component","siteUrl":"https://xrpl.org","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"]}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"bdslink-component","__idx":0},"children":["BdsLink Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A comprehensive, accessible link component from the XRPL.org Brand Design System (BDS). Supports multiple variants, sizes, and automatic theme-aware color states with animated arrow icons."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"table-of-contents","__idx":1},"children":["Table of Contents"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#installation"},"children":["Installation"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#basic-usage"},"children":["Basic Usage"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#props-api"},"children":["Props API"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#variants"},"children":["Variants"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#sizes"},"children":["Sizes"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#color-states"},"children":["Color States"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#icon-animations"},"children":["Icon Animations"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#accessibility"},"children":["Accessibility"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#best-practices"},"children":["Best Practices"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#examples"},"children":["Examples"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#related-components"},"children":["Related Components"]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"installation","__idx":2},"children":["Installation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { BdsLink } from 'shared/components/Link';\n// or\nimport { BdsLink } from 'shared/components/Link/Link';\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":3},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Internal link (default)\n<BdsLink href=\"/docs\">View Documentation</BdsLink>\n\n// External link\n<BdsLink href=\"https://example.com\" variant=\"external\" target=\"_blank\" rel=\"noopener noreferrer\">\n  External Resource\n</BdsLink>\n\n// Inline link (no icon)\n<p>\n  Learn more about <BdsLink href=\"/about\" variant=\"inline\">our mission</BdsLink>.\n</p>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props-api","__idx":4},"children":["Props API"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The URL the link points to"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'internal' | 'external' | 'inline'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'internal'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link variant determining icon and behavior"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["size"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'small' | 'medium' | 'large'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'medium'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Size of the link text and icon"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'arrow' | 'external' | null"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Override icon type (auto-determined by variant if ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Disables the link, preventing navigation"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["children"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link text content"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["...rest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnchorHTMLAttributes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["All standard anchor attributes (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rel"]},", etc.)"]}]}]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"variants","__idx":5},"children":["Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"internal-default","__idx":6},"children":["Internal (Default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For navigation within the same website. Displays a horizontal arrow (→) that animates to a chevron (>) on hover."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<BdsLink href=\"/docs\" variant=\"internal\">\n  Internal Documentation\n</BdsLink>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"external","__idx":7},"children":["External"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For links to external websites. Displays a diagonal arrow with corner bracket (↗) that animates on hover. Always use with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target=\"_blank\""]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rel=\"noopener noreferrer\""]}," for security."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<BdsLink \n  href=\"https://github.com/XRPLF\" \n  variant=\"external\" \n  target=\"_blank\" \n  rel=\"noopener noreferrer\"\n>\n  GitHub Repository\n</BdsLink>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"inline","__idx":8},"children":["Inline"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For links embedded within body text. No icon is displayed, making the link flow naturally within paragraphs."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<p>\n  The XRP Ledger is a decentralized blockchain. You can{\" \"}\n  <BdsLink href=\"/docs\" variant=\"inline\">read the documentation</BdsLink>{\" \"}\n  to learn more.\n</p>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"sizes","__idx":9},"children":["Sizes"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Size"},"children":["Size"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Font Size"},"children":["Font Size"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Line Height"},"children":["Line Height"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Icon Gap"},"children":["Icon Gap"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["small"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["14px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1.5"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["6px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["medium"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1.5"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["large"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["20px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1.5"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["10px"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<BdsLink href=\"/docs\" size=\"small\">Small Link</BdsLink>\n<BdsLink href=\"/docs\" size=\"medium\">Medium Link</BdsLink>\n<BdsLink href=\"/docs\" size=\"large\">Large Link</BdsLink>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-states","__idx":10},"children":["Color States"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Link component automatically handles color states based on the current theme. Colors are applied via CSS and follow the Figma design specifications."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"light-mode","__idx":11},"children":["Light Mode"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"State"},"children":["State"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Color Token"},"children":["Color Token"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Hex Value"},"children":["Hex Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Additional Styles"},"children":["Additional Styles"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Enabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 400"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#0DAA3E"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No underline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 500"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#078139"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Underline, arrow animates"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focus"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 500"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#078139"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Underline, black outline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Active"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 400"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#0DAA3E"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Underline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Visited"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Lilac 400"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#7649E3"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No underline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 400"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#A2A2A4"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No underline, no pointer"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dark-mode","__idx":12},"children":["Dark Mode"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"State"},"children":["State"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Color Token"},"children":["Color Token"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Hex Value"},"children":["Hex Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Additional Styles"},"children":["Additional Styles"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Enabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#21E46B"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No underline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#70EE97"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Underline, arrow animates"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focus"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#70EE97"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Underline, white outline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Active"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#21E46B"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Underline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Visited"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Lilac 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#C0A7FF"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No underline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 500"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#838386"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No underline, no pointer"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"focus-outline","__idx":13},"children":["Focus Outline"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Light Mode"]},": 2px solid black (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#000000"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark Mode"]},": 2px solid white (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#FFFFFF"]},")"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"icon-animations","__idx":14},"children":["Icon Animations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Both internal and external arrow icons feature a smooth animation on hover/focus:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Animation Duration"]},": 150ms"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Timing Function"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cubic-bezier(0.98, 0.12, 0.12, 0.98)"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"internal-arrow-animation","__idx":15},"children":["Internal Arrow Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The horizontal line of the arrow (→) shrinks from left to right, revealing a chevron shape (>)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"external-arrow-animation","__idx":16},"children":["External Arrow Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The diagonal line of the external arrow (↗) scales down toward the top-right corner, leaving just the corner bracket."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-state","__idx":17},"children":["Disabled State"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When disabled, the animation is disabled and the icon opacity is reduced to 50%."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":18},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Link component follows accessibility best practices:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"keyboard-navigation","__idx":19},"children":["Keyboard Navigation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Focusable via Tab key"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Activatable via Enter key"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Clear focus indicator with high-contrast outline"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"aria-attributes","__idx":20},"children":["ARIA Attributes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-disabled=\"true\""]}," is applied when the link is disabled"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Icons are marked with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-hidden=\"true\""]}," to prevent screen reader announcement"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"best-practices","__idx":21},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use descriptive link text"]}," - Avoid \"click here\" or \"read more\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["External links"]}," - Consider adding \"(opens in new tab)\" for screen readers"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled state"]}," - Provide context for why the link is disabled"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Good - Descriptive link text\n<BdsLink href=\"/pricing\">View pricing plans</BdsLink>\n\n// Bad - Non-descriptive\n<BdsLink href=\"/pricing\">Click here</BdsLink>\n\n// External with screen reader context\n<BdsLink \n  href=\"https://example.com\" \n  variant=\"external\" \n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\n  aria-label=\"GitHub Repository (opens in new tab)\"\n>\n  GitHub Repository\n</BdsLink>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices-1","__idx":22},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dos","__idx":23},"children":["Do's"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use appropriate variants"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Internal navigation\n<BdsLink href=\"/about\" variant=\"internal\">About Us</BdsLink>\n\n// External sites\n<BdsLink href=\"https://github.com\" variant=\"external\" target=\"_blank\" rel=\"noopener noreferrer\">\n  GitHub\n</BdsLink>\n\n// Within paragraphs\n<p>Learn about <BdsLink href=\"/xrp\" variant=\"inline\">XRP</BdsLink> today.</p>\n","lang":"tsx"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Match size to context"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Navigation/CTA - use large\n<BdsLink href=\"/get-started\" size=\"large\">Get Started</BdsLink>\n\n// Body content - use medium\n<BdsLink href=\"/docs\" size=\"medium\">Documentation</BdsLink>\n\n// Footnotes/captions - use small\n<BdsLink href=\"/terms\" size=\"small\">Terms of Service</BdsLink>\n","lang":"tsx"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Always use security attributes for external links"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<BdsLink \n  href=\"https://external-site.com\" \n  variant=\"external\"\n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\n>\n  External Site\n</BdsLink>\n","lang":"tsx"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"donts","__idx":24},"children":["Don'ts"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't use disabled for navigation prevention"]}," - Use proper routing instead"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Bad - Using disabled for auth gate\n<BdsLink href=\"/dashboard\" disabled={!isAuthenticated}>Dashboard</BdsLink>\n\n// Good - Handle in onClick or router\n<BdsLink href=\"/dashboard\" onClick={handleAuthCheck}>Dashboard</BdsLink>\n","lang":"tsx"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't mix variants inappropriately"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Bad - External link with internal variant\n<BdsLink href=\"https://example.com\" variant=\"internal\">External Site</BdsLink>\n\n// Good\n<BdsLink href=\"https://example.com\" variant=\"external\">External Site</BdsLink>\n","lang":"tsx"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't use inline variant for standalone links"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Bad - Standalone inline link\n<BdsLink href=\"/docs\" variant=\"inline\">Documentation</BdsLink>\n\n// Good - Use internal for standalone\n<BdsLink href=\"/docs\" variant=\"internal\">Documentation</BdsLink>\n","lang":"tsx"},"children":[]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":25},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"navigation-menu","__idx":26},"children":["Navigation Menu"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<nav className=\"d-flex flex-column gap-3\">\n  <BdsLink href=\"/docs\" size=\"medium\">Documentation</BdsLink>\n  <BdsLink href=\"/tutorials\" size=\"medium\">Tutorials</BdsLink>\n  <BdsLink href=\"/api\" size=\"medium\">API Reference</BdsLink>\n  <BdsLink \n    href=\"https://github.com/XRPLF\" \n    variant=\"external\" \n    size=\"medium\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n  >\n    GitHub\n  </BdsLink>\n</nav>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"call-to-action-section","__idx":27},"children":["Call-to-Action Section"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<div className=\"d-flex flex-column gap-4\">\n  <BdsLink href=\"/get-started\" size=\"large\">\n    Get Started with XRPL\n  </BdsLink>\n  <BdsLink href=\"/use-cases\" size=\"large\">\n    Explore Use Cases\n  </BdsLink>\n</div>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"rich-text-content","__idx":28},"children":["Rich Text Content"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<article>\n  <p>\n    The XRP Ledger (XRPL) is a decentralized, public blockchain led by a{\" \"}\n    <BdsLink href=\"/community\" variant=\"inline\">global community</BdsLink>{\" \"}\n    of businesses and developers. It supports a wide variety of{\" \"}\n    <BdsLink href=\"/use-cases\" variant=\"inline\">use cases</BdsLink>{\" \"}\n    including payments, tokenization, and DeFi.\n  </p>\n  \n  <p>\n    To learn more, check out the{\" \"}\n    <BdsLink href=\"/docs\" variant=\"inline\">official documentation</BdsLink>{\" \"}\n    or visit the{\" \"}\n    <BdsLink \n      href=\"https://github.com/XRPLF\" \n      variant=\"inline\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      GitHub repository\n    </BdsLink>.\n  </p>\n</article>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-state-1","__idx":29},"children":["Disabled State"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<div className=\"d-flex flex-column gap-3\">\n  <BdsLink href=\"/premium\" size=\"medium\" disabled>\n    Premium Features (Coming Soon)\n  </BdsLink>\n  <span className=\"text-muted\">This feature is not yet available.</span>\n</div>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":30},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["LinkArrow"]}," - The animated arrow icon component used internally by Link"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button"]}," - For actions that don't navigate (forms, modals, etc.)"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"file-structure","__idx":31},"children":["File Structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"shared/components/Link/\n├── index.ts          # Exports\n├── Link.tsx          # Main component\n├── Link.md           # This documentation\n├── LinkArrow.tsx     # Arrow icon component\n├── _link.scss        # Link styles\n└── _link-icons.scss  # Arrow icon styles & animations\n"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"changelog","__idx":32},"children":["Changelog"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"v100","__idx":33},"children":["v1.0.0"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initial release with internal, external, and inline variants"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Three size options (small, medium, large)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Theme-aware color states (light/dark mode)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Animated arrow icons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full accessibility support"]}]}]},"headings":[{"value":"BdsLink Component","id":"bdslink-component","depth":1},{"value":"Table of Contents","id":"table-of-contents","depth":2},{"value":"Installation","id":"installation","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"Props API","id":"props-api","depth":2},{"value":"Variants","id":"variants","depth":2},{"value":"Internal (Default)","id":"internal-default","depth":3},{"value":"External","id":"external","depth":3},{"value":"Inline","id":"inline","depth":3},{"value":"Sizes","id":"sizes","depth":2},{"value":"Color States","id":"color-states","depth":2},{"value":"Light Mode","id":"light-mode","depth":3},{"value":"Dark Mode","id":"dark-mode","depth":3},{"value":"Focus Outline","id":"focus-outline","depth":3},{"value":"Icon Animations","id":"icon-animations","depth":2},{"value":"Internal Arrow Animation","id":"internal-arrow-animation","depth":3},{"value":"External Arrow Animation","id":"external-arrow-animation","depth":3},{"value":"Disabled State","id":"disabled-state","depth":3},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Keyboard Navigation","id":"keyboard-navigation","depth":3},{"value":"ARIA Attributes","id":"aria-attributes","depth":3},{"value":"Best Practices","id":"best-practices","depth":3},{"value":"Best Practices","id":"best-practices-1","depth":2},{"value":"Do's","id":"dos","depth":3},{"value":"Don'ts","id":"donts","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Navigation Menu","id":"navigation-menu","depth":3},{"value":"Call-to-Action Section","id":"call-to-action-section","depth":3},{"value":"Rich Text Content","id":"rich-text-content","depth":3},{"value":"Disabled State","id":"disabled-state-1","depth":3},{"value":"Related Components","id":"related-components","depth":2},{"value":"File Structure","id":"file-structure","depth":2},{"value":"Changelog","id":"changelog","depth":2},{"value":"v1.0.0","id":"v100","depth":3}],"frontmatter":{"seo":{"title":"BdsLink Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/Link/legacy/BdsLink.md"},"lastModified":"2026-08-20T20:24:24.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/components/link/legacy/bdslink-1","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}