{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"TileLink 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":"tilelink-component","__idx":0},"children":["TileLink Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A clickable tile component for link grids, featuring text content with an arrow icon."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["TileLink is an atomic component designed for use in grid layouts. It provides a consistent, interactive tile with support for both links (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]},") and buttons (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]},"), featuring smooth animations and full accessibility support."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":2},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Two Color Variants"]},": Gray and Lilac"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Light/Dark Mode"]},": Full theming support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Five Interaction States"]},": Default, Hover, Focused, Pressed, Disabled"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Window Shade Animation"]},": Hover color wipes from bottom to top on enter, top to bottom on exit"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Arrow Icon"]},": Animated arrow that moves on hover"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive"]},": Adapts padding and font size across breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessible"]},": Proper ARIA labels, focus states, and semantic HTML"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-sizing","__idx":3},"children":["Responsive Sizing"]},{"$$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":"Breakpoint"},"children":["Breakpoint"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Height"},"children":["Height"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding"},"children":["Padding"]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Base (< 576px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["64px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["12px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["26.1px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["MD (576px - 991px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["64px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["26.1px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["LG (≥ 992px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["64px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["20px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["18px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["26.1px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants","__idx":4},"children":["Color Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"gray-variant","__idx":5},"children":["Gray Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Light Mode"]},": gray-200 background (#E6EAF0), black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark Mode"]},": gray-500 background (#5A5A5E), white text"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"lilac-variant","__idx":6},"children":["Lilac Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Both Modes"]},": lilac-100 background, black text (consistent across light/dark)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":7},"children":["Usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-link-gray-variant---default","__idx":8},"children":["Basic Link (Gray Variant - Default)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TileLink\n  variant=\"gray\"\n  label=\"Documentation\"\n  href=\"/docs\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"lilac-variant-with-click-handler","__idx":9},"children":["Lilac Variant with Click Handler"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TileLink\n  variant=\"lilac\"\n  label=\"Get Started\"\n  onClick={() => navigate('/start')}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-state","__idx":10},"children":["Disabled State"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TileLink\n  variant=\"gray\"\n  label=\"Coming Soon\"\n  disabled\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":11},"children":["Props"]},{"$$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":["variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'gray' | 'lilac'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'gray'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link text/label"]}]},{"$$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":"td","attributes":{},"children":["Link destination (renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Click handler (renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]},")"]}]},{"$$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":["Disabled state"]}]},{"$$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":"Heading","attributes":{"level":2,"id":"animation-details","__idx":12},"children":["Animation Details"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Transition Duration"]},": 200ms"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Timing Function"]},": cubic-bezier(0.98, 0.12, 0.12, 0.98)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover Effect"]},": Window shade animation using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["clip-path"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Arrow Animation"]},": Translates 4px to the right on hover"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":13},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Renders as semantic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]}," when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," is provided"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Renders as semantic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]}," when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," is provided"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Includes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-label"]}," for screen readers"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Includes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-disabled"]}," for disabled states"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["2px focus outline with proper offset"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keyboard navigable"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":14},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TileLink.tsx"]}," - React component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TileLink.scss"]}," - Styles with BEM naming convention"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["README.md"]}," - This file"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":15},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["LinkSmallGrid"]},": Pattern component that uses TileLink in a responsive grid layout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["LinkArrow"]},": Arrow icon component used within TileLink"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-system","__idx":16},"children":["Design System"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Part of the Brand Design System (BDS) with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-"]}," namespace prefix."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"showcase","__idx":17},"children":["Showcase"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["about/tile-link-showcase.page.tsx"]}," for comprehensive examples of all variants and states."]}]},"headings":[{"value":"TileLink Component","id":"tilelink-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Features","id":"features","depth":2},{"value":"Responsive Sizing","id":"responsive-sizing","depth":2},{"value":"Color Variants","id":"color-variants","depth":2},{"value":"Gray Variant","id":"gray-variant","depth":3},{"value":"Lilac Variant","id":"lilac-variant","depth":3},{"value":"Usage","id":"usage","depth":2},{"value":"Basic Link (Gray Variant - Default)","id":"basic-link-gray-variant---default","depth":3},{"value":"Lilac Variant with Click Handler","id":"lilac-variant-with-click-handler","depth":3},{"value":"Disabled State","id":"disabled-state","depth":3},{"value":"Props","id":"props","depth":2},{"value":"Animation Details","id":"animation-details","depth":2},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Files","id":"files","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Design System","id":"design-system","depth":2},{"value":"Showcase","id":"showcase","depth":2}],"frontmatter":{"seo":{"title":"TileLink Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/patterns/TileLinks/README.md"},"lastModified":"2026-02-07T18:55:48.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/patterns/tilelinks/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}